使用webpack将ES6转化ES5的实现方法
babel使用
打开babel官网,按教程安装babel
安装
npm install --save-dev babel-loader @babel/core @babel/preset-env
配置rules
module: { rules: [ { test: /\.js$/, exclude: /node_modules/, loader: "babel-loader" } ] }
生成 .babelrc文件
{ "presets": ["@babel/preset-env"] }
此时webpack已经能正确的将高版本的js语法转为低版本的语法,但是对于新增的api并不会转化,如promise。这时我们就需要其他的插件
使用polyfill插件,对于babel=>7.4.0该方法弃用
安装
npm install --save @babel/polyfill
修改 .babelrc
{ "presets": [ [ "@babel/preset-env", { "useBuiltIns":"usage" // 只转化使用了的API } ] ] }
使用 在需要转换的文件里引入polyfill
import "@babel/polyfill";
@babel/polyfill 和 @babel/preset-env 的关系
@babel/preset-env 中与 @babel/polyfill 的相关参数有 targets 和 useBuiltIns 两个
targets: 支持的目标浏览器的列表
useBuiltIns: 参数有 “entry”、”usage”、false 三个值。默认值是false,此参数决定了babel打包时如何处理@babel/polyfilll 语句。
“entry”: 会将文件中 import‘@babel/polyfilll'语句 结合 targets ,转换为一系列引入语句,去掉目标浏览器已支持的polyfilll 模块,不管代码里有没有用到,只要目标浏览器不支持都会引入对应的polyfilll 模块。
“usage”: 不需要手动在代码里写import‘@babel/polyfilll',打包时会自动根据实际代码的使用情况,结合 targets 引入代码里实际用到 部分 polyfilll 模块
false: 对 import‘@babel/polyfilll'不作任何处理,也不会自动引入 polyfilll 模块
安装
npm install --save-dev @babel/plugin-transform-runtime
修改 .babelrc
{ "presets": [ [ "@babel/preset-env" ] ], "plugins": [ [ "@babel/plugin-transform-runtime", { "absoluteRuntime": false, "corejs": 3, "helpers": true, "regenerator": true, "useESModules": false } ] ] }
注意上面corejs设置项,不同的值需要不同的依赖包
corejs的值 | 需要安装的依赖包 |
---|---|
false | npm install --save @babel/runtim |
2 | npm install --save @babel/runtime-corejs2 |
3 | npm install --save @babel/runtime-corejs3 |
以上就是本文的全部内容,希望对大家的学习有所帮助
您可能感兴趣的文章:
- js 分别使用es5,及es6 实现call方法
- 使用webpack编译es6代码的方法步骤
- 使用scss + react + webpack + es6实现幻灯片
- 使用express、react、webpack打包、socket.io、mongodb、ant.design、less、es6实现聊天室
- 5分钟内使用React、Webpack与ES6构建应用
- web打印实现方案 Lodop6.034 使用方法总结
- 使用webpack或者 gulp进行ES6开发
- 使用CSS中的meta实现web定时刷新或跳转的方法
- JAVAWEB开发之Servlet3.0新特性的使用以及注解的详细使用和自定义注解的方法、动态代理的使用、利用动态代理实现细粒度的权限控制以及类加载和泛型反射
- webpack中使用iconfont字体图标的方法
- vue init webpack-simple 模板中全局引入Jquery正确使用方法 可保jQuery插件正常使用
- 【webpack】使用webpack进行ES6开发
- 使用Babel将ES6转换为ES5时报错解决方法
- webpack的简单使用实现倒计时
- 使用webstorm+webpack构建简单入门级“HelloWorld”的应用&&构建使用jquery来实现
- 使用Electron构建React+Webpack桌面应用的方法
- webpack基本使用方法
- Webpack 4.XXX 配置文件webpack.config.js和package.json【使用方法总结】
- webpack-dev-server使用方法
- web打印实现方案 Lodop6.034 使用方法总结