使用 Webpack 外部组件并仍然允许 ES6 样式导入？答案

【问题标题】：Using Webpack externals and still allow ES6 style imports?使用 Webpack 外部组件并仍然允许 ES6 样式导入？
【发布时间】：2018-02-14 08:00:40
【问题描述】：

我正在创建一个 Chrome 扩展程序，并且正在使用 React 和 Webpack。

因为这是一个 Chrome 扩展，我可以在我自己的任何代码行执行之前使用manifest.json 将 React 和 ReactDOM 加载到浏览器中。我的理解是：

manifest.json 加载的 react.js 库显示为全局变量，可通过 window.React 访问
可以配置 webpack 外部组件，这样 React 和 ReactDOM 就不会被捆绑

这是我的文件：

webpack.config.js

module.exports = {

  entry: './index.js',
  output: {
    filename: 'skinny-bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: "babel-loader"
      }
    ]
  },

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

manifest.json

{
  "manifest_version": 2,
  "name": "Test Application",
  "version": "3.2",
  "description": "testing",
  "short_name": "some test",

  "author": "blah blah",

  "content_scripts": [
     {
       "matches": ["https://www.google.com/*"],
       "js": [
         "react.js",
         "react-dom.js",

         "skinny-bundle.js"
       ],
       "run_at": "document_idle"
     }
   ]
}

index.js

import HelloGreeting from './HelloGreeting'    

ReactDOM.render(
    <HelloGreeting />,
    document.getElementById('cst')
)

HelloGreeting.js

// import React from 'react'   <----- here is my problem!!!

// functional component test
const Hello = props => {
  return (
    <div>hello world</div>
  )
}

// class component test
class HelloGreeting extends React.Component {
  constructor(props) {
    super(props)
  }

  render() {
    return (
      <ul>
        <li><Hello /></li>
        <li>hello universe</li>
      </ul>
    )
  }
}

export default HelloGreeting

这就是我的问题。我有一个名为 HelloGreeting 的简单 React 组件，如果我保留 import React from 'react' 行，它就不起作用。如果我注释掉导入，它实际上是有效的，因为我的猜测是 webpack 只是忽略它，因为 React 已在 webpack 外部定义。如果我将 import 语句留在中，我会收到 "Uncaught TypeError: Cannot read property 'Component' if undefined" 错误，可能是因为 Webpack 试图以某种方式捆绑并弄乱 window.React。我之所以做出这个猜测是因为 webpack 在有或没有导入的情况下会发出什么。

如果我注释掉导入，webpack 会发出一个更小的包：

Hash: 26f1526e2554c828c050
Version: webpack 3.5.5
Time: 80ms
           Asset     Size  Chunks             Chunk Names
skinny-bundle.js  5.75 kB       0  [emitted]  main
   [1] ./HelloGreeting.js 2.5 kB {0} [built]
    + 1 hidden module

如果我继续导入，我的 webpack 会发出一个更大的包：

Hash: 1fc9353f1fe6dd935744
Version: webpack 3.5.5
Time: 77ms
           Asset     Size  Chunks             Chunk Names
skinny-bundle.js  6.05 kB       0  [emitted]  main
   [1] ./HelloGreeting.js 2.71 kB {0} [built]
    + 2 hidden modules

我的问题是，我可以做些什么来配置 webpack，以便我仍然有我的 ES6 样式导入并且仍然有 webpack NOT bundle react.js？

我真的很想保留 import 声明，因为这些组件将在未来的项目中使用，我希望尽可能保持模块化和可移植性。

【问题讨论】：

我还没有使用模块，所以我的评论可能无关紧要，但是如果您希望浏览器处理import，它是not yet supported in extensions，而且您在内容中使用相对路径脚本，不在 iframe 中，对吗？如果是，则当前 URL 是网页的 URL。
我尝试将我的代码从import React from 'react' 更改为const React = require('react')，但仍然出现同样的错误。

标签： javascript reactjs google-chrome-extension webpack

【解决方案1】：

事实证明我把 webpack externals 过于复杂化了。

更改自：

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

到：

externals: {
    react: 'React',
    'react-dom': 'ReactDOM'
  },

...解决了我的问题。现在 webpack 会忽略我所有的 React 代码并保持我的包很小。

https://github.com/webpack/webpack/issues/1275帮了我一把。

【讨论】：