如何将 Bower 组件导入到 npm、webpack 项目中？

【问题标题】：How to import bower components to an npm, webpack project?如何将 Bower 组件导入到 npm、webpack 项目中？
【发布时间】：2016-04-07 10:44:53
【问题描述】：

我已经建立了一个基本的 webpack/babel/mocha 项目，只是为了玩。现在我用 Bower 将 jQuery 和 Paper.js 安装到我的项目中，但我希望它们在 npm start 上与 webpack 捆绑在一起，我不想写额外的 <script> 标签等。

我只想将它们用作import $ jQuery from 'jquery'。但现在我的设置在 npm_modules 中查找 jquery 包。如何告诉 npm 在 bower_components 文件夹中查找这些？

这是一个合乎逻辑的决定吗？还是我应该以其他方式进行设置？

【问题讨论】：

标签： npm webpack bower

【解决方案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 之外的很多情况下也可以派上用场 - 例如，如果您需要使用当前未通过包管理器分发的库，您可以将其添加到项目文件夹中并使用别名使其可用于您的代码。

【讨论】：