[转] webpack中配置Babel
2024-08-24 07:08:19
一、安装
npm install --save-dev babel-loader babel-corebabel-preset-env
二、在webpack.config.js中配置module
|
1
2
3
4
5
6
7
8
9
|
module: { rules: [ { test: /\.js$/, exclude: /(node_modules|bower_components)/, loader: 'babel-loader' } ]} |
三、新建.babelrc配置文件
如下是vue-cli自动生成的babel配置。如果要配置plugins，需要npm install对应插件和依赖。
|
1
2
3
4
5
6
7
8
9
10
11
12
|
{ "presets": [ ["env", { "modules": false, "targets": { "browsers": ["> 1%", "last 2 versions", "not ie <= 8"] } }], "stage-2" ], "plugins": ["transform-vue-jsx", "transform-runtime"]} |
四、polyfill：完整模拟ES2015+
Babel默认只转换新的JavaScript句法，而不转换新的API，比如Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise等全局对象，以及一些定义在全局对象上的方法（比如Object.assign）都不会转码。如果想让这些方法运行，就需要使用babel-polyfill，为当前环境提供一个垫片。
npm install --save babel-polyfill
|
1
2
3
4
5
6
7
|
// 方法一：在webpack中引用module.exports = { entry: ["babel-polyfill", "./app/js"]};// 方法二：在js入口顶部引入import "babel-polyfill"; |
最新文章
- Python导出Excel为Lua/Json/Xml实例教程（三）：终极需求
- thrift:swift项目笔记
- 项目中 poi 导出 出现html特殊符号的实体 （已解决）
- ajax鼠标滚动请求 或 手机往下拉请求
- SpringMVC4 + Spring + MyBatis3 基于注解的最简配置
- .Net Framework 4.5.2 on Windows 10
- servlet中Java连接数据库后的基本操作
- crm 2011 plugin setparent setbusiness 用户更改经理 更改办事处
- Spring中使用log4j随笔
- .net web api 一
- 一种单片机支持WiFi的应用——SimpleWiFi在单片机中的应用
- mysql实现主从备份
- VGG
- php判断用户是否关注微信公众号
- 一个漂亮的php验证码类
- Html引入百度富文本编辑器ueditor
- P1274 魔术数字游戏 naive搜索+剪枝
- Linux下 MYSQL 主从复制、同步
- Thinkphp5笔记一：项目部署
- STA分析(六) cross talk and noise