Question

我正在构建一个我希望Node和浏览器都可以使用的JavaScript库。

我的库包含几个模块以及几个[Handlebars]模板，没有任何无法在浏览器中运行的模板。而是将所有模块压缩到一个源文件中，并将模板添加到该源文件中（通过令人讨厌的字符串连接），我真的希望将事物分离出来，放在各自的源文件中。所以我有

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

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

这是什么常见的解决方案？ Browserify？咕噜？还有别的吗？

请注意，我想在AngularJS应用中使用这个库，我想保留这个库香草。

Answer 1

我最近经历了这个过程，花了更多的时间，而不是为了找到一个好的解决方案而奋斗。这三个要求很重要：

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

问题，我发现，＆＃34;您希望在每个环境中require('<third party lib>')呼叫做什么？＆＃34;在npm，bower和component之间，我无法在任何单个包管理器中找到所有依赖项。一些依赖项在浏览器中支持CommonJS，但其他依赖项没有。一个用于Node.JS和浏览器的脚本不同。另一个以不同寻常的方式检测到Node.JS，并且没有使用Browserify。

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

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

使用这种方法，所有Node.JS依赖项都存在于node_modules中，版本通过package.json进行管理，并且我的所有浏览器依赖项都可以存在于vendor文件夹中，无论在何处他们来自。或者他们都可以从CDN获得。通过将第三方库保留在浏览器构建之外，重建速度很快，尤其是在使用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。

至于测试，我在require下只有一个test/ d files个测试套件，并使用了watchify来构建该文件。我将watchify目标文件加载到Mocha中的require数组中，其中包含依赖项。只要test/每个测试套件的文件都不在mocha目录本身中，运行watchify <"--require" arguments> tests.js -o tests-built.js && karma start && mocha --watch以在Node.JS中运行测试仍然可以正常工作。 / p>

然后您需要做的就是运行：

...现在你是一个跨平台的TDD JavaScript大师：）

Answer 2

使用Browserify：）

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

尝试不同模式后（在网上搜索UMD）。

我发现browserify为我做了。例如，如果您使用Browserify with Grunt，则只需将standalone: true传递给Browserify任务，即可免费获得AMD支持。

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

2 个答案: