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

Posted 2020-11-21 rebirth-csz

用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:UsersHPDesktop
eact-antD
eact-antd
ode_modulesantdlibstylecolorezierEasing.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 [email protected]^2.7.3   

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