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

时间:2016-04-07 10:44:53

标签: npm webpack bower

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?

1 个答案:

答案 0 :(得分:1)

就个人而言,我通常建议通过NPM安装所有内容 - 这些天大多数前端依赖都在那里。但是,它确实在Paper.js NPM页面上说他们建议使用Bower来下载库的浏览器版本(可能在NPM包中有一些特定于节点的代码?我不确定)。

要让Webpack使用Bower软件包,您可以使用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")
        }
    }
    ...
}

这在Bower之外的很多情况下也会派上用场 - 例如,如果您需要使用当前未通过包管理器分发的库,您只需将其添加到项目文件夹中即可使用别名使其可用于您的代码。