Webpack和Babel：导入问题

Question

问题：

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

我使用下面的命令并获得此错误消息。我已经在github上阅读了有关此问题的多个问题，并按照他们的建议去做，但是我仍然收到此错误消息。因此，.babelrc和命令为：

命令：

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}

Answer 1

好吧，所以您的主要问题是您正在创建url(r'^download/(?P<slug>[\w-]+)/$', views.AppDownloadView.as_view(), name='download_document')配置，但是正在使用webpack语法混合。由于webpack是从Node运行的，因此无论哪个版本，ES模块都无法正常工作，除非将它们（使用babel）转译为CommonJS（而且，您无法将ES modules与module.exports混合使用，否则它们都是ES5或所有ES模块）。

对您来说，最简单的解决方案是将import语句转换为import，一切都将像这样运行：) require在这里没有用，因为它仅被加载.babelrc启动并在您的源代码上运行webpack后。

babel-loader

这样想：在配置webpack时-在ES5中编写所有内容。