更新了 npm 依赖，现在它不会编译

Question

我将几年前做的一个 react-redux 测试项目更新为所有最新版本的 npm 依赖项，但现在我无法编译它。当我运行npm run dev 时出现错误：

ERROR in ./js/client.js 10:16
Module parse failed: Unexpected token (10:16)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders                                                                         
| const app = document.getElementById('app')
| 
> ReactDOM.render(<Provider store={store}>
|   <Layout />
| </Provider>, app);
ℹ ｢wdm｣: Failed to compile.

我的webpack.config.js 看起来像

var debug = process.env.NODE_ENV !== "production";
var webpack = require('webpack');
var path = require('path');

module.exports = {
  context: path.join(__dirname, "src"),
  devtool: debug ? "inline-sourcemap" : null,
  entry: "./js/client.js",
  module: {
  },
  output: {
    path: __dirname + "/src/",
    filename: "client.min.js"
  },
  plugins: debug ? [] : [
    new webpack.optimize.DedupePlugin(),
    new webpack.optimize.OccurenceOrderPlugin(),
    new webpack.optimize.UglifyJsPlugin({ mangle: false, sourcemap: false }),
  ],
  devServer: {
    host: "0.0.0.0",
  }
};

我知道这在几年前是可行的，但我也知道 JavaScript 世界发展很快。我用谷歌搜索了这条消息，但我发现的所有点击都与 .jsx 文件扩展名有关，而我没有这些。

Answer 1

我不确定您使用的是以前版本的软件包，但 webpack 已朝着将 loaders 与核心分离的方向发展。因此，您必须单独安装它们。

您将加载程序添加到webpack.config.js 文件的module 部分。更多信息和教程在这里：https://webpack.js.org/concepts/#loaders

babel-loader 几乎是.js 和/或.jsx 近来最受欢迎的一个。 https://www.npmjs.com/package/babel-loader/v/8.0.0-beta.1

试一试，这是使用yarn add babel-loader @babel/core @babel/preset-react -D 安装后的样子，它将这些依赖项添加到package.json 的开发部分中

var debug = process.env.NODE_ENV !== "production";
var webpack = require('webpack');
var path = require('path');

module.exports = {
  context: path.join(__dirname, "src"),
  devtool: debug ? "inline-sourcemap" : null,
  entry: "./js/client.js",
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
        }
      },
    ],
  },
  output: {
    path: __dirname + "/src/",
    filename: "client.min.js"
  },
  plugins: debug ? [] : [
    new webpack.optimize.DedupePlugin(),
    new webpack.optimize.OccurenceOrderPlugin(),
    new webpack.optimize.UglifyJsPlugin({ mangle: false, sourcemap: false }),
  ],
  devServer: {
    host: "0.0.0.0",
  }
};

在这几个步骤之后，您很可能会遇到其他错误，但如果您及时通知我，我很乐意帮助您启动和运行 webpack 流！

编辑

您还需要在您的项目根目录中使用 babel.config.js（或一些类似的模式），在此处阅读有关 babel 的更多信息：https://babeljs.io/

这是一个例子：

module.exports = (api) => {
  api.cache(true)

  const presets = [
    '@babel/preset-env', '@babel/preset-react'
  ]
  // add any more presets you need above as shown

  const plugins = [
    // add any plugins you need here
  ]
  return {
    presets,
    plugins
  }
}