javascript - 意外的 token 导入(React JS 和 Babel)

Question

当我尝试运行我的应用程序时，出现以下错误: (function (exports, require, module, __filename, __dirname) { import { Row } from '../grid' SyntaxError: Unexpected token import

我尝试了几个 stackoverflow 答案，建议我安装 babel-plugin-transform-es2015-modules-commonjs babel-plugin-transform-class-properties babel-preset-es2015

然后配置我的babel-rc文件如下:

{
  "presets": ["env", "es2015", "react", "stage-2"],
  "plugins": [
    ["transform-es2015-modules-commonjs"],
    ["transform-class-properties"],
    [
      "import",
      { "libraryName": "antd", "libraryDirectory": "es", "style": "css" }
    ]
  ]
}

但这些都不起作用。

这是我的 webpack.config.js 的片段，应该配置 babel-loader转译 .jsx|.js

module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: ['babel-loader']
}

Answer 1

你的 .babelrc 应该看起来像

{
  "presets": [
    "@babel/env",
    "@babel/react"
  ]
}

这意味着你应该有

"@babel/core": "^7.0.0"
"@babel/preset-env": "^7.0.0"
"@babel/preset-react": "^7.0.0"

作为开发依赖项。

这就是启用 b​​abel 中的标准功能所必需的，包括导入和 JSX 支持。删除除这三个包之外的所有 babel 包，除非您还使用 babel pollyfills。