Question

我正在使用此react redux starter。我想用这个启动器 ant design。但是我很难通过webpack将ant设计添加到这个启动器中。从ant设计文档中我想使用.babelrc文件将ant设计babel库导入到我的项目中。启动器不使用.babelrc文件加载babel插件（如here所示），它使用webpack configuration file。

如何将ant设计库（下面的代码）添加到webpack配置文件中？

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

NB：我已经在ant设计文档中尝试过该方法，但收到错误消息：Unknown plugin "import" in *\.babelrc at 0。我还尝试在启动器的webpack配置file的第76行插入一行["import", { libraryName: "antd", style: "css" }]，但错误Unknonw plugin "import" specified in base at 4。

Answer 1

您必须安装babel-plugin-import。

npm i babel-plugin-import --save-dev
yarn add babel-plugin-import --dev

“JSX”的webpack配置示例如下所示：

{
    test: /\.jsx$/,
    loader: 'babel-loader',
    exclude: [nodeModulesDir],
    options: {
        cacheDirectory: true,
        plugins: [
            'transform-decorators-legacy',
            'add-module-exports',
            ["import", { "libraryName": "antd", "style": true }],
            ["react-transform", {
                transforms: [
                    {
                        transform: 'react-transform-hmr',
                        imports: ['react'],
                        locals: ['module']
                    }
                ]
            }]
        ],
        presets: ['es2015', 'stage-0', 'react']
    }
},

使用babel-loader加载JSX文件。 babel-loader运行插件。其中一个插件是babel-plugin-import。此插件可确保部分导入antd。插件将import { Checkbox } from 'antd';转换为var Checkbox = require('antd/lib/checkbox');。

使用webpack配置antdesign

1 个答案: