使用Browserify使Bower与npm配合工作

Question

我们在 JavaScript 包管理方面有很多选择，这既是福音也是诅咒。每个方案都有其优点。出于某些原因，我选择了 npm 作为我的主要解决方案。然而，其他系统（如 bower 和 component）中也有很多好的代码，我们不能忽视这些方案。因此，我希望设置一个环境，在这个环境中，我可以使用 browserify 从 npm 和 bower 中加载包（component 的问题留待另一篇文章讨论）。

目前我想到的最好的方法是，在 package.json 中设置一个 postinstall 脚本来运行 bower install 命令。

{
  ... configuration ...

  "scripts": {
    "postinstall": "bower install"
  }
}

这将在安装一级依赖项（即直接的Bower依赖项和直接的npm依赖项）时构建正确的目录结构：

- MyMixedComponent
  - main.js
  - package.json
  - node_modules
    - npmDependency
  - bower_components
    - bowerComponent

使用debowerify转换器在browserify中编译正常，browserify -t debowerify。但是，当我想在另一个项目中使用npm安装MyMixedComponent时，npm install MyMixedComponent，目录结构将会按照npm的预期进行构建：

- MyNewProject
  - main.js
  - package.json
  - node_modules
    - MyMixedComponent
      - main.js
      - package.json
      - node_modules
        - npmDependency
      - bower_components
        - bowerComponent

由于Bower是一个扁平的依赖树，当尝试使用Browserify和Debowerify进行构建时，这显然行不通。实际上需要的是类似于这样的东西：

- MyNewProject
  - main.js
  - package.json
  - node_modules
    - MyMixedComponent
      - main.js
      - package.json
      - node_modules
        - npmDependency
   - bower_components
     - bowerComponent

或者可以修改 debowerify 来识别多个 bower 目录，但这将破坏 bower 的优秀特性，即它是一个扁平的树形结构，这对于前端依赖项来说更好。你有什么想法吗？还是我只能祈祷我们总有一天会在依赖管理上达成共识？

- Brian Peacock

---

可能是一个重复问题：AngularJS RequireJS Browserify和JavaScript模块/全局作用域噩梦 - Paul Sweatte

@PaulSweatte，你参考的问题涉及Angular最佳实践和AMD/CommonJS模块范式之间的冲突。该问题旨在纠正包管理系统之间冲突的结构;一个是分层的（npm），一个是平面的（bower）。我的目标是在项目中同时利用这两个系统，同时保持模块化。也就是说，在将项目作为独立或库处理时，依赖项可以正确加载。 - Brian Peacock

你尝试过使用“napa”与browserify一起访问bower包吗？嗯，我不太明白你在问什么，但它似乎是在该领域中使用的工具。 - Marcus Rådell

napa 看起来是解决支持不支持 npm 的模块的一个不错的方案。我看到的弱点是安装使用 napa 导入的模块的依赖项。例如，我们可能最终会编写一个混乱的小脚本，如 napa username/repo-with-bower; cd node_modules/repo-with-bower; bower install;。 - Brian Peacock

为什么不同时使用grunt自动化呢？ - rollingBalls

Answer 1

在同一代码库中拥有多个bower_components的想法存在引入某些特定框架的重复风险。

尝试走这条路：

1. 将混合（npm和bower）包安装到当前包中时，
2. 像往常一样安装npm（嵌套），
3. 并将每个来自混合包的bower-component bower install 到当前包的根目录中
4. 交互式npm postinstall脚本可以更改当前包的bower.json
5. 并警告用户执行bower install，因为bower.json现在已更新为您其他npm / bower混合包的组件

- Zasz

---

我在想是否有一种避免修改根包的 bower.json 文件的方法，因为这很可能处于版本控制之下。也许只需为每个嵌套的依赖项运行 bower install <package> 即可。但是嵌套包仍然会获得其自己的 bower_components 目录中查找的重复代码: / - Brian Peacock