将 antd 与 react-boilerplate 集成答案

【问题标题】：Integrating antd with react-boilerplate将 antd 与 react-boilerplate 集成
【发布时间】：2017-02-27 02:23:06
【问题描述】：

我将此添加到生产配置中：

babelQuery: {
    plugins: [["import", { libraryName: "antd", style: true }]],
  },

但我仍然收到ReferenceError: Menu is not defined. 之类的错误，我错过了什么吗？当我将相同的内容添加到开发配置中时，一切都在本地运行良好，所以我有点困惑。

【问题讨论】：

【解决方案1】：

我目前遇到了完全相同的问题。所以我会在这里添加额外的信息。

我也从以下页面获取信息来设置 ant-design 工具包： https://ant.design/docs/react/use-with-create-react-app

webpack.dev.babel 包含以下 babelQuery 并且工作正常：

babelQuery: {
    presets: ['babel-preset-react-hmre'].map(require.resolve),
    plugins: [['import', { libraryName: 'antd', style: true }]],
},

开发环境运行良好。

但是，当像这样向 webpack.prod.babel 添加相同的插件配置时：

babelQuery: {
    plugins: [['import', { libraryName: 'antd', style: true }]],
},

在运行生产构建后加载页面时，我收到类似 @userinev 的错误。

Uncaught ReferenceError: Menu is not defined

加载从 antd 库加载的第一个组件时出现问题。

从 prod-config 中删除插件配置时，应用正在加载，但样式丢失。

更新： Menu.Item 中的点 (.) 是生产构建中的问题。解决方法是创建一个“别名”，例如

const Item = Menu.Item;

【讨论】：

【解决方案2】：

或者，您可以删除导致错误的 babel 插件的 package.json 中包含的样板：

删除这个： “插件”：[ “变换反应内联元素” ]

【讨论】：