Question

我已经使用nodejs创建了库，而webpack用于捆绑它，因此可以在客户端使用它。

但是，如果我尝试将捆绑的文件用于我的节点应用程序，它就不起作用。那么，我如何创建可在客户端和服务器端工作的Isomorphic库？

Answer 1

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

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

构建和捆绑工具（如webpack，browserify，...）具有将模块捆绑为umd的功能，因此它与所有模块加载系统兼容：

<强>的WebPack ：

设置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'
  }
};

<强> Browserify ：

使用--standalone（-s）选项：

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

Answer 2

facebook使用React支持可以在客户端和服务器端使用的同构组件创建。

它的JSX概念有助于解决这个问题。

Git Hub Isomorphic Example

React with Node for Isomorphic

同构Javascript的好处：

更好的整体用户体验
搜索引擎可索引
更轻松的代码维护
免费渐进增强功能

如何创建在客户端和服务器端都有效的JavaScript库（Isomorphic）？

2 个答案: