Webpack+SemanticUI+React：进程未定义

Question

我发现了很多关于 Webpack 错误的帖子：

Uncaught ReferenceError: process is not defined

其中大部分建议在webpack.config.js 中添加插件：

plugins: [ 
  // ...
  new webpack.DefinePlugin({
      'process.env': {
      NODE_ENV: JSON.stringify(process.env.NODE_ENV || 'development')
      }
  }),
  // ...
]

但是，在我的情况下，这似乎并不能解决问题。

为了方便起见，我创建了a repo，使用 Webpack 设置SemanticUI-React 的最低要求，应该很容易导航。我在webpack.config.js 中的配置深受recent tutorial 的启发，它似乎有很多积极的cmets。

要重现错误，只需在您的机器上克隆 repo（我使用 yarn，但这也适用于 npm）：

git clone https://github.com/sheljohn/minimal-semantic-react
cd minimal-semantic-react/
yarn install
yarn run serve

在localhost:3000打开，在开发者控制台中可以看到错误。

据我了解，似乎当 React 加载时，它正在寻找使用变量 process.env.NODE_ENV 来确定是否设置了生产或开发模式，该变量在浏览器中未定义。

这可能与 Webpack 配置中的 target 字段有关（默认设置为 web）；但由于 React 是从 CDN 加载的，在捆绑之前，我猜它不知道 WebPack 在做什么，这让我很困惑为什么在配置中添加插件会改变任何东西......

因此我的问题是：是否可以通过将大库（React、ReactDOM、语义）声明为外部库来使用语义 UI 反应？如果我捆绑它们一切正常，但捆绑最终大约 4MB，这是相当大的。

---

其他详情

Chrome 中出现的错误（OSX High Sierra，v66.0.3359.181，开发控制台）：

react.development.js:14 Uncaught ReferenceError: process is not defined
    at react.development.js:14
(anonymous) @ react.development.js:14

以及第 14 行的代码摘录：

if (process.env.NODE_ENV !== "production") {

---

文件webpack.config.js

const path = require("path");
const webpack = require("webpack");
const publicFolder = path.resolve(__dirname, "public");

module.exports = {
  entry: "./src/index.jsx",
  target: "web",
  output: {
    path: publicFolder,
    filename: "bundle.js"
  },
  devServer: {
    contentBase: publicFolder,
    port: 3000
  },
  externals: {
    'jquery': 'jQuery',
    'lodash': '_',
    'react': 'React',
    'react-dom': 'ReactDOM',
    'semantic-ui-react': 'semantic-ui-react'
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader'
        }
      }
    ]
  },
  plugins: [ 
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: JSON.stringify(process.env.NODE_ENV || 'development')
      }
    }),
    new webpack.HotModuleReplacementPlugin()
  ]
};

---

文件.babelrc

{
  "presets": ["env", "react"]
}

Answer 1

我想我终于解决了这个问题：

• 错误 #1：我使用的是来自 cdnjs 的 cjs 版本的 React 库，而我应该使用 umd。虽然 UMD 样式很丑陋，但它似乎在浏览器中运行良好，而 CommonJS 使用 require 为例。有关 AMD / CommonJS / UMD 的比较，请参阅 this post。

• 错误#2：在webpack.config.js 中，外部semantic-ui-react 的“名称”应为semanticUIReact（区分大小写）。这是从 CDN 加载脚本时在 window 全局中定义的内容（例如，jQuery 或 React）。

我用这些修复更新了the repository，您应该能够在您的机器上重现该工作示例。 此存储库包含使 SemanticUI、React 和 Webpack 协同工作所需的最低限度。这将为我节省大量时间，因此希望其他人能从中受益！

Answer 2

如果我将它们捆绑在一起，一切都很好，但捆绑包最终大约有 4MB，这相当大。

这是因为您将它们捆绑在“开发”模式下。尝试在您的脚本中使用“生产”，它会小得多。 "build": "webpack --mode production"

如果您在生产环境中捆绑所有内容，而不指定外部，那么对于独立应用程序会更好。