babel-plugin-import配置babel按需引入antd模块，编译后报错.bezierEasingMixin()

用create-react-app做项目的时候，同时引入了antd，为了实现按需加载antd模块，用到他们提供的 babel-plugin-import （一个用于按需加载组件代码和样式的 babel 插件）

虽然项目一开始是用create-react-app创建，但是之后有 yarn run eject，将所有内建的配置暴露出来，这样可以自由重新配置webpack，至于为什么要这样，是因为目前create-react-app初始化的项目

并不支持less文件，但是它已经把webpack的一些基础配置也封装起来了。而antd是基于less开发的，为了更灵活地使用antd甚至是改动一下antd中的less源码，很有必要重新配置一下webpack.

yarn run eject之后，为了实现按需加载，我重新配置了webpack.config.dev.js 当然webpack.config.prod.js也一样

其实只是一个简单的改动：在babel-loader之前插入了一段简单的配置。如下

 1           // Process JS with Babel.
 2           {
 3             test: /\.(js|jsx|mjs)$/,
 4             include: paths.appSrc,
 5             loader: require.resolve('babel-loader'),
 6             options: {
 7               plugins:[
 8                   ['import',{libraryName:'antd', style:true}]
 9               ],
10               // This is a feature of `babel-loader` for webpack (not Babel itself).
11               // It enables caching results in ./node_modules/.cache/babel-loader/
12               // directory for faster rebuilds.
13               cacheDirectory: true,
14             },
15           },

然后 yarn run start 编译完成后发现报错了。错误如下：

Failed to compile
./node_modules/antd/lib/button/style/index.less
Module build failed: 

// https://github.com/ant-design/ant-motion/issues/44  
.bezierEasingMixin();
^
Inline JavaScript is not enabled. Is it set in your options?
      in C:\Users\HP\Desktop\react-antD\react-antd\node_modules\antd\lib\style\color\bezierEasing.less (line 110, column 0)
This error occurred during the build time and cannot be dismissed.

如何解决这个问题呢？报错信息给了一个链接 https://github.com/ant-design/ant-motion/issues/44

于是打开项目package.json发现less版本是^3.0.4

目前来看，解决方案：将less版本降到3.0以下比如安装 2.7.3版本。

两种方式：

1.yarn add less@^2.7.3

2.打开项目的package.json 找到dependencies下面的less 将其版本改为 "2.7.3" 然后 yarn install

babel-plugin-import配置babel按需引入antd模块，编译后报错.bezierEasingMixin()

猜你喜欢