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

Question

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

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

这是合乎逻辑的决定吗？或者我应该以其他方式设置它吗？

Answer 1

就我个人而言，我通常建议通过 NPM 安装所有内容 - 现在大多数前端依赖项都在那里。但是，它确实在 Paper.js NPM 页面上说他们建议使用 Bower 下载库的浏览器版本（也许 NPM 包中有一些特定于 Node 的代码？我不确定）。

要让 Webpack 与 Bower 包一起工作，您可以使用 config.resolve.alias:

设置自定义 name/path

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

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

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

npm

bower

webpack