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 , ...
随机推荐
- Spring框架源码阅读之Springs-beans(一)容器的基本实现概述(待续)
去年通过实际框架代码的阅读,以及结合<Spring源码深度解析>和<Spring技术内幕>的阅读,对Spring框架内Bean模块有了一个整体性的认识.对此进行的总结性整理和回 ...
- JDK8新增接口的默认方法与静态方法
JDK8之前,interface中可以定义常量和抽象方法,访问修饰符是public. public interface A { /** a1和a2写法是等价的 */ public static fin ...
- python框架之Django(14)-rest_framework模块
APIView django原生View post请求 from django.shortcuts import render, HttpResponse from django import vie ...
- 【Tools】-NO.93.Tools.5.pyCharm-【pyCharm 安装与破解配置】-
1.0.0 Summary Tittle:[Tools]-NO.93.Tools.5.pyCharm-[pyCharm 安装与破解配置]- Style:Tools Series:Tools Since ...
- 家庭记账本之微信小程序(三)
继上篇注册阶段后,经过查阅资料学习后,以下介绍开发阶段 1.登录微信公众平台就能在菜单“开发”---“基本配置”中看到小程序的AppID了. 小程序的 AppID 相当于小程序平台的一个身份证,后续你 ...
- Python基础(二)自定义函数
1.判断字符串,内容是否为数字 我们用python:xlrd读Excel内容时,本来只是输入的整数字,经常读出来的是float类型 我们需要自动转成整型,意思就是说,读出来的和我们输入的一样,但是,我 ...
- mysql 终止 存储过程
[1]如下图所示 有时候,存储过程执行语句中有循环,且已启动.但出于某种原因,我们突然不想让其再继续执行,需要终止其线程. Good Good Study, Day Day UP. 顺序 选择 循环 ...
- DRF之视图类(mixin)源码解析
同样的增删改查操作,如果我们还像之前序列化组件那样做,代码重复率过多,所以我们用视图表示: 具体源码实现:首先定义一个视图类,然后根据mixin点进去有五个封装好的方法,这五个方法共有的属性就是都需 ...
- 当SQL Server的实例位于集群的特定节点时,数据库无法远程访问
搭建好了一个集群环境,发现当SQL Server的实例位于集群的其中一个节点时,数据库无法远程访问,报如下错误.但在另一个 节点时,数据库访问正常. 标题: 连接到服务器 -------------- ...
- 盒子布局、标签特性display、浮动、定位position
盒子模型布局: 盒子模型:每个标签都是一个盒子 盒子在页面显示在大小是:自身宽度+边框+边距(内边框+外边距) 如果一个盒子设置了边框,则边框需要被加两遍.若果设置了边距则内外边距根据设置情况要被加两 ...