Bundling Livescript with Webpack

To use Webpack to bundle Livescript's for browser use you will need to appropriately configure webpack.config.ls otherwise bundling process will be stopped with errors accompanied by warnings.

Tested with:

• livescript : "^1.5.0",
• webpack : "^4.0.0",

Fix

In order to bundle Livescript without error and warnings you need to define two things in config:

• fs module in node section
• require.extensions in plugins section using DefinePlugin

module.exports =
   node:
       fs: "empty"
   plugins: [
       new webpack.DefinePlugin "require.extensions": {}
   ]

or you could use this function to augment already existing configuration:

add-livescript-requirements = (module-exports) ->
    module-exports
        ..{}node <<<
            fs: "empty"
        ..[]plugins.push do
            new webpack.DefinePlugin "require.extensions": {}
# use it like this
add-livescript-requirements module.exports

Explanation

If you are curious why that fix work, you can read below how each warning and error were addressed.

Errors

ERROR in ./node_modules/livescript/lib/parser.js
Module not found: Error: Can't resolve 'fs' in '/home/bartek/Projekty/livescript-webpack/node_modules/livescript/lib'
 @ ./node_modules/livescript/lib/parser.js 965:17-30
 @ ./node_modules/livescript/lib/index.js

ERROR in ./node_modules/livescript/lib/node.js
Module not found: Error: Can't resolve 'fs' in '/home/bartek/Projekty/livescript-webpack/node_modules/livescript/lib'
 @ ./node_modules/livescript/lib/node.js 4:7-20
 @ ./node_modules/livescript/lib/index.js 

Because 'fs' module doesn't have any alternative on the browser side we must provide one ourselves. If you wont use livescript.run then empty fs will be sufficient

module.exports =
    node:
        fs: "empty"

Now Livescript could be bundled although with some warning.

Warnings

WARNING in ./node_modules/livescript/lib/index.js
103:20-27 Critical dependency: require function is used in a way in which dependencies cannot be statically extracted
 @ ./node_modules/livescript/lib/index.js

This warning is generated because Livescript is using require as an object but Webpack can only handle using it as a function. This warning will be fixed when addressing two following warnings about require.extensions

WARNING in ./node_modules/livescript/lib/index.js
require.extensions is not supported by Webpack. Use a loader instead.

WARNING in ./node_modules/livescript/lib/node.js
require.extensions is not supported by Webpack. Use a loader instead.
 @ ./node_modules/livescript/lib/index.js 101:2-19

Livescript is using require.extensions as an indicator of working in node.js environment and also as way to enable compilation of Livescript files on demand by simply requiring them. In order to get rid of those warnings we need tell Webpack what to do whe it encouters a require.extensions. To achieve that we will use DefinePlugin for creating dummy require.extensions

module.exports =
    plugins: [
        new webpack.DefinePlugin "require.extensions": {}
    ]

Now whenever webpack finds require.extensions it will substitute it with object that we defined {} and also previous warning about 'require' disappears because code that generates it is never reached:

if require.extensions # require.extensions == {}
    (require './node') exports
else
    # Attach `require` for debugging.
    exports <<< {require} # never reached