CODEWITHSUNDEEP
npmwebpackbower
godzsa
godzsa

Reputation: 2395

How to import bower components to an npm, webpack project?

I have set up a basic webpack/babel/mocha project just for playing around. Now I installed jQuery and Paper.js to my project with Bower, but I want them to be bundled with webpack on npm start, I don't want to write extra <script> tags etc.

I just want to use them as import $ jQuery from 'jquery'. But now my setup looks for the jquery package in npm_modules. How can I tell npm to look for these in the bower_components folder?

Is this a logical decision tho? Or am I supposed to set up this any other way?

Upvotes: 1

Views: 1995

Answers (1)

Joe Clay
Joe Clay

Reputation: 35797

Personally, I'd usually recommend installing everything through NPM - most frontend dependencies are on there these days. However, it does say on the Paper.js NPM page that they recommend using Bower to download the browser version of the library (perhaps there's some Node-specific code in the NPM package? I'm not sure).

To get Webpack working with Bower packages, you can set a custom name/path using config.resolve.alias:

var path = require("path");

var config = {
    ...
    resolve: {
        alias: {
            "jquery": path.resolve(__dirname, "path/to/bower/file"),
            "paper": path.resolve(__dirname, "path/to/bower/file")
        }
    }
    ...
}

This can come in handy in quite a few situations outside of Bower, too - for example, if you need to use a library that isn't currently distributed through a package manager, you can just add it to your project folder and use an alias to make it available to your code.

Upvotes: 2

Related Questions