Ant Design error: "Unknown plugin 'import' specified in '[..]/.babelrc'"

Question

我已将以下内容放入我的 .babelrc 中：

{
  "plugins": [
    ["import", { libraryName: "antd", style: "css" }] // `style: true` for less
  ]
}

这是错误： “[..]/.babelrc”

中指定的未知插件 "import"

此外，我从文档中不清楚是否必须为 CSS 导入 CSS：

每个组件（例如 DatePicker）或
if antd/dist/antd.css 包括一切。

在 1 的情况下。将 CSS 路径作为示例的一部分会很好。

在第 2 种情况下，我应该把它放在哪里，在我的 App.js?

这些是我安装的 babel 包：

"babel-core": "^6.24.0",
"babel-eslint": "^7.2.1",
"babel-loader": "^6.4.1",
"babel-plugin-transform-class-properties": "^6.23.0",
"babel-plugin-transform-decorators-legacy": "^1.3.4",
"babel-preset-es2015": "^6.24.0",
"babel-preset-react": "^6.23.0",
"babel-preset-stage-0": "^6.22.0",

这是我的 webpack.config.js:

const webpack = require('webpack');
const path = require('path');
const nodeModulesPath = path.resolve(__dirname, 'node_modules');

const config = {

  // Render source-map file for final build
  devtool: 'source-map',

  // Entrypoint of the app, first JS to load
  entry: [
    path.join(__dirname, './app/index.js'),
  ],

  output: {
    path: path.resolve(__dirname, "build"), // absolute Path of output file
    filename: 'bundle.js', // Name of output file
    publicPath: '/static'
  },

  module: {
    rules: [
      {
        test: /\.js$/, // All .js files
        exclude: [nodeModulesPath],
        use: [
          {
            loader: "babel-loader",
            options: {
              presets: [
                "es2015",
                "stage-0",
                "react",
              ],
              plugins: [
                "transform-class-properties",
                "transform-decorators-legacy"
              ]
            }
          }
        ]
      }
    ]
  },

  plugins: [
    // Define production build to allow React to strip out unnecessary checks
    new webpack.DefinePlugin({
      'process.env':{
        'NODE_ENV': JSON.stringify('development')
      }
    }),
    // Suppress all the "Condition always true" warnings
    new webpack.optimize.UglifyJsPlugin({
      compress: {
        warnings: false
      },
      minimize: true,
    }),
  ],

};

module.exports = config;

Answer 1

安装 babel-plugin-import 您可以在 https://github.com/ant-design/babel-plugin-import

中查看文档

Ant Design error: "Unknown plugin 'import' specified in '[..]/.babelrc'"

Ant Design error: "Unknown plugin 'import' specified in '[..]/.babelrc'"

css

webpack

babeljs

antd