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的启发，这似乎有很多积极的评论。

要重现错误，只需在您的计算机上克隆回购（我使用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，这是非常大的。

其他详细信息

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 ：当我本来应该使用cjs时，我正在使用来自cdnjs的umd版本的React库。虽然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，这是非常大的。

这是因为你将它们捆绑在＆＃34;开发＆＃34;模式。尝试使用＆＃34; production＆＃34;而在你的脚本中，它会小得多。 "build": "webpack --mode production"

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

Webpack + SemanticUI + React：未定义流程

其他详细信息

2 个答案: