javascript - 如何创建适用于客户端和服务器端(同构)的 javascript 库？

Question

我已经使用 nodejs 创建了库，并使用 webpack 将其捆绑，以便可以在客户端使用。

但如果我尝试将捆绑文件用于我的 Node 应用程序，它就无法工作。那么，我该如何创建同时适用于客户端和服务器端的同构库？

Answer 1

这不是服务器端或客户端的问题，而是使用的模块加载系统的问题。

您可能已经知道人们使用 CommonJS( Node 使用)、AMD(在客户端用于编写模块化 javascript)和/或 脚本标签(在客户端)加载javascript模块。所以你应该以某种方式准备你的库，以便能够与这些模块加载系统中的任何一个一起使用。因此，有一个UMD(U通用M模块D定义)模式，使您的模块兼容所有这些模块系统(参见 UMD templates 人们用来实现这种模式)。

构建和捆绑工具(如 webpack、browserify 等)可以将您的模块捆绑为 umd，因此它与所有模块加载系统兼容:

网络包:

设置libraryTarget和library输出配置:

webpack.config.js

module.exports = {
  entry: './myModule.js',
  output: {
      filename: './dist/myModule.js',
      // export to AMD, CommonJS, or window
      libraryTarget: 'umd',
      // set window global to this name
      library: 'myModule'
  }
};

浏览器化:

使用 --standalone ( -s ) 选项:

browserify main.js -s myModule -o myModule.js