如何在Node AND浏览器中使用相同的库，同时保持库的模块化

How can I use the same library in Node AND a browser while keeping my library modular?

本文关键字：模块化 Node AND 浏览器      更新时间：2023-09-26

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

我的库由几个模块和几个[Handerbar]模板组成，没有什么不能在浏览器中运行的。与其将所有模块压缩到一个源文件中，还不如将模板添加到该源文件中(通过讨厌的字符串串联(，我真的希望在它们自己的、单独的源文件中保持分离。所以我会有

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

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

对此有什么共同的解决方案？Browserify？咕哝还有别的吗？

请注意，我想在AngularJS应用程序中使用这个库，并且我想保持这个库的香草风格。

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

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

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

我想要一个在任何情况下都有效的单一解决方案。我决定使用的解决方案是：

  1. 始终使用节点。JS require('<npm name>')调用第三方库
  2. 为了在所有情况下在浏览器中都能做到这一点，请使用Browserify的--require功能将所有依赖项别名为它们的npm预期名称，同时加载一个填充程序，以获得依赖项的全局公开版本。这意味着在浏览器上，必须先加载所有依赖项，然后才能执行生成的lib

通过这种方法，所有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')

其他依赖项只需要另一个填充程序文件，并使用新的填充程序重新启动watchify。

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

然后你所需要做的就是运行：

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

现在您是跨平台TDD JavaScript大师：(

使用Browserify:(

在这个库中工作时，我尝试了几个选项：https://github.com/dfernandez79/barman

在尝试了不同的模式之后(在网上搜索UMD(。

我发现browserify是为我做这件事的。例如，如果你在Grunt中使用browserify，你只需要将standalone: true传递给Browseriify任务，你就可以免费获得AMD支持。

相关文章：