webpack - Webpack 和 babel：导入问题

问题描述

问题：

SyntaxError: Unexpected token {
import { merge } from 'webpack-merge';

我使用下面的命令并收到此错误消息。我已经在 github 上阅读了多个关于此的问题并按照他们的建议进行操作，但我仍然收到此错误消息。所以， .babelrc 和 command 是：

命令：

cross-env NODE_ENV=production webpack -p --config webpack/client.prod.config.js

.babelrc：

{
"presets": [
    ["@babel/preset-env", {
       "targets": {
          "node": "current",
          "browsers": ["last 2 versions"]
       }
    }],
    "@babel/preset-react"],
"plugins": [
    "react-loadable/babel",
    "@babel/plugin-syntax-dynamic-import",
    ["import-inspector", {
       "serverSideRequirePath": true
    }]
]
}

建议的解决方案：我在 .babelrc 文件中插入了“@babel/plugin-syntax-dynamic-import”，但没有帮助。

Webpack 配置：我的 webpack 由两个文件组成：通用文件和特定文件（客户端或服务器，开发或生产）。在这种情况下，我将只显示 common.js 和 client.prod.config.js：

1.common.js

2.client.prod.config.js

可以看出，问题出在 client.prod.config.js 文件中，因为我使用 import { merge } from '...'

标签： webpackbabeljs

好的，所以您的主要问题是您正在创建一个webpack配置，但您正在混合ES modules语法。由于 webpack 是从 Node 运行的，无论是什么版本，ES 模块都将无法工作，除非它们被转译（使用 babel）到 CommonJS（同样，你不能与混合module.exports，import它要么是所有的 ES5 要么是所有的 ES 模块）。

对您来说最简单的解决方案是将您的import语句转换为require，一切都会像那样工作:) 您.babelrc在这里没有用，因为它只会在webpack启动并babel-loader在您的源代码上运行时加载。

const { merge } = require("webpack-merge");
const { join } = require("path");
// And so on...

可以这样想：每当你配置 webpack 时——在 ES5 中编写所有内容。

webpack - Webpack 和 babel：导入问题

问题描述

解决方案

推荐阅读