4

图书馆

我正在创建一个 React.js 库并尝试将其打包为 UMD 以进行分发。在库中，webpack.config.js文件如下：

module.exports = {
  entry: [
    __dirname+'/modules/index.js'
  ],
  output: {
    path: path.join(__dirname, 'lib'),
    filename: 'index.js',
    library: 'MyLibrary',
    libraryTarget: 'umd'
  },
  externals: {
    root: 'React',
    commonjs2: 'react',
    commonjs: 'react',
    amd: 'react'
  },
  resolve: {
    extensions: ['', '.js']
  },
  plugins: [
    new webpack.optimize.OccurenceOrderPlugin(true)
  ]
};

正确运行webpack会在./lib/index.js.

消费者

但是，当尝试在另一个项目中使用这个库时，Webpack 错误地解析了MyLib 中的require('react')语句lib/index.js，并两次包含了 React 库。

消费者的webpack.config.js文件是：

module.exports = {
  entry: [
    __dirname + '/src/index.js'
  ],
  output: {
    path: path.join(__dirname, 'dist'),
    pathinfo: true,
    filename: 'index.js'
  }
};

消费者的入口点非常简单（src/index.js）：

React = require('react');
MyLib = require('my-lib');

console.log('React.Component', React.Component);

webpack在消费者中运行返回：

Version: webpack 1.12.11
Time: 1179ms
   Asset     Size  Chunks             Chunk Names
index.js  1.35 MB       0  [emitted]  main
   [0] multi main 28 bytes {0} [built]
   [1] ./src/index.js 199 bytes {0} [built]
 [170] ../my-lib/lib/index.js 165 kB {0} [built] [1 error]
    + 168 hidden modules

ERROR in ../my-lib/lib/index.js
Module not found: Error: Cannot resolve module 'react' in [...]my-lib/lib
 @ ../my-lib/lib/index.js 3:27-43

如果我react在其中通过 npm安装，node_modules/my-lib那么 webpack 将毫无错误地运行，但 React.js 将在最终输出中包含两次。检查构建的文件表明，当 Webpack 在其中遇到时require('react')，node_modules/my-lib/lib/index.js它会尝试node_modules直接从本地包含一个新版本，而不是从src/index.js.

我觉得我在这里遗漏了一些非常明显的东西，但我无法取得任何进展。

4

1 回答 1

1

在node_modules/react/lib/ReactTransitionGroup.jsReact 中作为相对依赖项包含在内：

var React = require('./React');

我不知道为什么在这个特定文件中以这种方式包含 React，而不是 React 包中的其他任何地方。

var React = require('react');

无论如何，正因为如此，React 被包含了两次，分别是节点模块（require('react')）和文件模块（require('./React.js')）。Webpack 会将它们视为两个不同的模块，并将它们添加两次。

我避免了这种重复，使这个相对模块成为指向同一个 React 的外部依赖项。与您对 React 模块所做的相同，但两者都适用。然后它只捆绑一次。

webpack.config.js

var reactExternals = {
  root: 'React',
  commonjs2: 'react',
  commonjs: 'react',
  amd: 'react'
};
var reactDOMExternals = {
  root: 'ReactDOM',
  commonjs2: 'react-dom',
  commonjs: 'react-dom',
  amd: 'react-dom'
};

module.exports = {
  entry: [
    __dirname+'/modules/index.js'
  ],
  output: {
    path: path.join(__dirname, 'lib'),
    filename: 'index.js',
    library: 'MyLibrary',
    libraryTarget: 'umd'
  },
  externals: [
    {
      'react': reactExternals,
      './React': reactExternals,
      'react-dom': reactDOMExternals
    }
  ],
  resolve: {
    extensions: ['', '.js']
  },
  plugins: [
    new webpack.optimize.OccurenceOrderPlugin(true)
  ]
};
于 2016-01-15T19:11:10.097 回答