javascript - 如何在保持库模块化的同时在 Node 和浏览器中使用相同的库？

Question

我正在构建一个 JavaScript 库，我希望它能被 Node 和浏览器使用。

我的库由几个模块和几个 [Handlebars] 模板组成，没有任何东西不能在浏览器中运行。而不是将所有模块压缩到一个源文件中，并将模板添加到该源文件中(通过讨厌的字符串连接)，我真的很想把东西分开放在它们自己的、单独的源文件中。所以我会

src/
  module1.js
  module2.js
  templates/
    one.handlebars
    two.handlebars

然后，也许我会通过构建过程将所有内容打包到一个 dist 文件 (dist/mylibrary.js) 中。

什么是常见的解决方案？浏览器化？咕噜声？还有别的吗？

请注意，我想在 AngularJS 应用程序中使用这个库，并且我想保留这个库。

Answer 1

我最近经历了这个过程，花了比我更高兴的时间来寻找一个好的解决方案。这三个要求很重要:

1. 如何跨 Node.JS 和浏览器处理第三方库？
2. 如何维护一个可以在 Node.JS 或浏览器上执行测试的代码库？我的库不与 DOM 或任何 Node.JS 核心模块交互，所以这是可以实现的。
3. 如何缩短构建时间，以免一直等待重建/测试周期完成。

我发现的问题是，“您希望 require('<third party lib>') 调用在每个环境中做什么？”在 npm、bower 和组件之间，我无法在任何一个包管理器中找到我的所有依赖项。一些依赖项在浏览器中支持 CommonJS，而另一些则不支持。一个针对 Node.JS 和浏览器有不同的脚本。另一个以不与 Browserify 一起工作的不寻常的方式检测到 Node.JS。

我想要一个适用于任何情况的单一解决方案。我决定使用的解决方案是:

1. 始终使用 Node.JS require('<npm name>')调用第三方库
2. 要使它在所有情况下都能在浏览器中工作，请使用 Browserify 的 --require功能将所有依赖项别名为它们的 npm 预期名称，同时加载一个 shim 来获取依赖项的全局公开版本。这意味着在浏览器上，必须在执行构建的库之前加载所有依赖项。

使用这种方法，所有 Node.JS 依赖项都位于 node_modules 中, 版本通过 package.json 管理，我所有的浏览器依赖项都可以存在于 vendor 中文件夹，无论它们来自何处。或者它们都可以从 CDN 提供服务。通过将第三方库排除在浏览器构建之外，重建速度很快，尤其是在使用 watchify 时。 (browserify 的观看模式)。

示例:(使用 watchify 并显示 async 和 lazy.js 的垫片)

watchify --require ./shims/async.js:async --require ./shims/async.js:lazy.js index.js --outfile dist/lib.js

垫片结构:

shims/
  index.js
  async.js
  lazy.js

Shim 脚本:

// shims/index.js
module.exports = function retrieveGlobal(globalKey){
  // Uses self so that this can be used in a web worker
  var module = self[globalKey];
  delete self[globalKey]; // Optional
  return module;
}

// shims/async.js
var shim = require('./')
module.exports = shim('async')

// shims/lazy.js
var shim = require('./')
module.exports = shim('Lazy')

其他依赖项只需要另一个 shim 文件和使用新 shim 重新启动 watchify。

至于测试，我有一个简单的文件 require d 每个 ( Mocha ) 测试套件在 test/ 下并使用 watchify 来构建该文件。我将 watchify 目标文件加载到 files 中 karma.conf.js 中的数组在它之前包含依赖项。只要文件即require每个测试套件都不在 test/ 中目录本身，正在运行 mocha在 Node.JS 中运行测试仍然可以正常工作。

然后你需要做的就是运行:

watchify <"--require" arguments> tests.js -o tests-built.js && karma start && mocha --watch

...现在您是跨平台 TDD JavaScript 大师:)