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 with the bare minimum to setup SemanticUI-React with Webpack, which should be straightforward to navigate. My config in webpack.config.js is heavily inspired from this recent tutorial，它似乎有很多积极的评论。

要重现错误，只需在您的机器上克隆存储库（我使用 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-react？一切正常如果我捆绑它们很好，但捆绑最终大约 4MB，这是 quite big.

其他详细信息

如 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 例如。参见 this post AMD / CommonJS / UMD 的比较。
错误 #2：在 webpack.config.js 中，外部 semantic-ui-react 的 "name" 应该是 semanticUIReact（区分大小写）。这是从 CDN 加载脚本时在 window 全局中定义的内容（例如 jQuery 或 React）。

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

Answer 2

Everything works fine if I bundle them, but the bundle ends up around 4MB, which is quite big.

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

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

Webpack+SemanticUI+React: 进程未定义

Webpack+SemanticUI+React: process is not defined

reactjs

semantic-ui

webpack

semantic-ui-react

其他详细信息