CODEWITHSUNDEEP
javascriptnode.jsnpmbundlewebpack
tbo
tbo

Reputation: 9738

Bundle external lib to my own javascript library

I'm trying to build a library and I want to use fabricjs as one of its dependencies. For those that have installed fabric they know that it is not completely trivial to install it (it requires specific libraries, specific node versions etc.). I have managed to install the package to my project and I'm using it with success.

What I want know, is to publish my specific library as a package to npm registry.

My problem is that I publish my package and when someone wants to install my package I "transfer" the same complexity to her/him. How is it possible for the user of my library to install it without first performing the same steps as if she/he was installing the fabricjs package itself?

I'v looked at the bundledDependencies property but with not much success.

I'm not considering myself a javascript expert so maybe my question is fundamentally wrong..

I'm currently using npm, and I'm also familiar with webpack if will do the job. To publish i do (from package.json):

"scripts": {
  "build": "babel ./src --out-dir ./lib",
  ...

Upvotes: 0

Views: 1232

Answers (1)

tbo
tbo

Reputation: 9738

Finally, I managed to figure it out with some webpack help, the solution is to build with webpack and all libraries will be bundled in one file, in detail:

1) create a webpack configuration (lets say webpack.cfg.js) as follows (help here):

module.exports = {
    entry: {
        src: './src'
    },
    output: {
        path: path.join(__dirname, 'lib'),
        filename: 'index.js',
        libraryTarget: 'umd'
    },
    //Use externals to exclude libraries
    //externals: ['lodash'],
    resolve: {
        extensions: ['', '.js']
    },
    module: {
        loaders: [
            {
                test: /\.(js|jsx)$/,
                include: [srcPath],
                exclude: /(node_modules|bower_components|lib)/,
                loaders: ['babel']
            }
        ]
    }
    ...
}

2) Then you build with:

"scripts": {
    "build": "webpack --config webpack.cfg.js --display-modules",
    ....
}

And it works, any external lib is included in the produced index.js, like a fat-jar (for the java world)

my 2 cents

Upvotes: 1

Related Questions