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之前插入了一段简单的配置。如下
// Process JS with Babel.
{
test: /\.(js|jsx|mjs)$/,
include: paths.appSrc,
loader: require.resolve('babel-loader'),
options: {
7 plugins:[
8 ['import',{libraryName:'antd', style:true}]
9 ],
// This is a feature of `babel-loader` for webpack (not Babel itself).
// It enables caching results in ./node_modules/.cache/babel-loader/
// directory for faster rebuilds.
cacheDirectory: true,
},
},
然后 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()的更多相关文章
- antd按需加载,配置babel-plugin-import插件,编译后报错.bezierEasingMixin()解决方案
报错如下: ./node_modules/antd/lib/button/style/index.less (./node_modules/css-loader??ref--6-oneOf-7-1!. ...
- creat-react-app搭建的项目中按需引入antd以及配置Less和如何修改antd的主题色
在creat-react-app搭建的项目环境中按需引入antd以及配置less,首先需要暴露出来webpack文件.(此操作不可逆). create-react-app myapp 创建同一个rea ...
- 配置 Windows 下的 nodejs C++ 模块编译环境 安装 node-gyp
配置 Windows 下的 nodejs C++ 模块编译环境 根据 node-gyp 指示的 Windows 编译环境说明, 简单一句话就是 "Python + VC++ 编译环境&quo ...
- Android 引入外部模块编译选择
/********************************************************************************* * Android 引入外部模块编 ...
- 按需引入antd报错问题
1.使用create-react-app工具创建了一个项目 create-react-app antd-demo 2.安装babel-plugin-import npm install babel-p ...
- 按需引入antd
使用create-react-app创建项目的时候,官网推荐使用 babel-plugin-import 对antd 按需引入文件.但是配置文件在项目里没有. 可以直接在package.json里加上 ...
- 配置 Windows 下的 nodejs C++ 模块编译环境
根据 node-gyp 指示的 Windows 编译环境说明, 简单一句话就是 "Python + VC++ 编译环境". 所有需要的安装文件, 我都下载好放到百度云盘了: nod ...
- create-react-app:reject和不reject(使用react-app-rewired)这2种情况下的antd组件按需引入配置
create-react-app:eject和不eject(使用react-app-rewired)这2种情况下的antd组件按需引入配置: 不eject(使用react-app-rewired)配置 ...
- webpack配置babel篇
babel-polyfill & babel-runtime & babel-preset-env babel-core babel-core 的作用是把 js 代码分析成 ast , ...
随机推荐
- python3 使用libvirt 相关安装
1.Linux下有Python2的环境下安装Python3参考: https://www.cnblogs.com/kimyeee/p/7250560.html 2.安装完Python3后,将/usr/ ...
- [py]GTM和UTC及python的时间戳
时间戳是一串字符串 time.time() 时间戳是指格林威治时间1970年01月01日00时00分00秒(北京时间1970年01月01日08时00分00秒)起至现在的总毫秒数.通俗的讲, 时间戳是一 ...
- Netty返回数据丢包的问题之一
这个问题是在一个群友做压力测试的时候发现的.使用客户端和netty创建一条连接,然后写了一个for循环不停的给服务器发送1500条信息,发现返回只有几百条.另外几百条不知道哪去了.查看代码,发现在服务 ...
- apache+jk+tomcat+ssl的https改造
项目背景 公司项目要进行https的改造,目前在测试环境搭建了一下,参考了网上的例子(http://blog.csdn.net/whumr1/article/details/7804992) 这里把主 ...
- 统计随机数及临界值Web Service接口
(2017-02-04 银河统计) 统计函数API概念 API(Application Programming Interface,应用程序编程接口)是一些预先定义的函数,目的是提供应用程序与开发 ...
- css3 二维码 添加 扫描特效
<section data-role="paragraph" class="_135editor" style="border: 0px non ...
- Docker 部署 portainer
Docker 部署 portainer 环境: docker 版本 :18.09.1 主机地址:192.168.1.81 一.部署 porttainer 1.修改docker配置文件,开放端口. vi ...
- Idea 提交代码到码云(提交到github也大同小异)
1.首先下载安装git,下载地址https://git-scm.com/download/win.按默认选择安装即可,不成功的自行百度 2.安装完成后双击git.exe,调出命令界面(此处需要自己去申 ...
- 复旦大学2016--2017学年第二学期(16级)高等代数II期末考试第六大题解答
六.(本题10分) 设 $A$ 为 $n$ 阶半正定实对称阵, $S$ 为 $n$ 阶实反对称阵, 满足 $AS+SA=0$. 证明: $|A+S|>0$ 的充要条件是 $r(A)+r(S)= ...
- 20175312 2018-2019-2 《Java程序设计》第2周学习总结
20175312 2018-2019-2 <Java程序设计>第2周学习总结 教材学习内容总结 已依照蓝墨云班课的要求完成了第二.三章的学习,主要的学习渠道是视频,和书的课后习题. 总结如 ...