Question

我有一种情况，我想通过cdn中的脚本标记加载React和ReactDOM。

为了实现这个目的，我需要告诉webpack（“webpack”：“^ 3.8.1”）不要将'import React'行转换为require，因为React将在浏览器中作为全局使用。鉴于我没有捆绑React，那些失败了。

虽然我可以避免代码中的导入，但我在导入的组件中没有这种能力。

我尝试了以下内容。

在配置中设置外部。

externals: {
    react: {
      root: 'React',
      commonjs2: 'react',
      commonjs: 'react',
      amd: 'react',
      umd: 'react',
    },
    'react-dom': {
      root: 'ReactDOM',
      commonjs2: 'react-dom',
      commonjs: 'react-dom',
      amd: 'react-dom',
      umd: 'react-dom',
    },
  }

使用webpack ignore plugin

plugins: [
        new webpack.IgnorePlugin(/^(React|react|ReactDOM|react-dom)$/)
    ]

并使用此module.noParse

const noParse = require('react-noparse').noParse;
module.noParse: /^(React|react|ReactDOM|react-dom)$/

做了相当多的搜索，还没有找到解决方案。任何方向将不胜感激。感谢

Answer 1

这是有效的。也许这是常识，另一方面也许它会帮助别人。昨天对我有用。

我在https://github.com/webpack/webpack/issues/1275阅读了有关创建的帖子导出React和ReactDOM的一行虚拟文件，如

module.exports = window.React;

然后在别名部分添加对这些文件的引用。

alias: {
    "react": "./dummyReact.js",
    "react-dom": "./dummyReactDOM.js"
}

虽然有效但事实证明，正确添加外部因素会导致webpack遵循相同的模式。

将其置于外部

externals: {
    'react': 'React',
    'react-dom': 'ReactDOM',
    "mylibrary": "MyLibrary"
}

导致webpack输出以下模块，这些模块将期望这些引用位于您的环境中的全局变量。

/* 2 */
/***/ (function(module, exports) {

module.exports = React;

/***/ }),
/* 3 */
/***/ (function(module, exports) {

module.exports = ReactDOM;

/***/ }),
/* 4 */
/***/ (function(module, exports) {

module.exports = MyLibrary;

/***/ })

在脚本标记中从cdn加载React时配置Webpack

1 个答案: