php实现把es6转为es5,使用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
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
php实现把es6转为es5,使用webpack将ES6转化ES5的实现方法相关推荐
- 使用webpack打包ES6代码
安装nodejs 根目录下运行 npm init 根据提示输入项目相关信息,然后运行: npm install 安装webpack 在项目根目录下运行 npm install webpack --sa ...
- webpack实现es6转换为es5
Webpack实现es6转换为es5 安装插件 npm install --save-dev babel-loader @babel/core @babel/preset-env 配置 在webpac ...
- webpack 处理es6转es5需要使用babel-loader
webpack 处理es6转es5需要使用babel-loader 1.假设你已经熟悉webpack基本环境的搭建 npm init -y 2,创建webpack.confg.js文件 3.安装bab ...
- 使用webpack将ES6转化ES5, Browerify
npm install --save-dev babel-loader @babel/core @babel/preset-env 生成 .babelrc文件 { "presets" ...
- 大前端进阶!NodeJS、Npm、Es6、Babel、Webpack、模块化开发
文章目录 大前端进阶 一.Node.js 1.1.Nodejs介绍和安装 1.2 .Nodejs入门 1.2.1.快速入门-Hello World 1.2.2.Node - 实现请求响应 1.2.3. ...
- 狂神说——大前端进阶NodeJS、Npm、Es6、Babel、Webpack、模块化使用
参考资料 文章目录 01 大前端基础知识概述 02 概述和前端工具VSCode安装 03 Nodejs的安装 04 Nodejs了解和快速入门 05 Nodejs实现htppserver服务 06 N ...
- Webpack搭建ES6开发环境步骤
Webpack搭建ES6开发环境步骤 第一步 安装模块 1.创建package.json文件 手动配置 npm init 自动配置 npm init -y 2.安装webpack和webpack-cl ...
- webpack+react+es6开发模式
一.前言 实习了两个月,把在公司用到的前端开发模式做个简单的整理.公司里前端开发模式webpack+react+redux+es6,这里去掉了redux. webpack, react, redux等 ...
- 用 Webpack 和 ES6 转换快速开发 Rails 的富客户端
2019独角兽企业重金招聘Python工程师标准>>> Fast Rich Client Rails Development With Webpack and the ES6 Tra ...
最新文章
- 归一化EvoNorms
- 【CodeForces - 260C】Balls and Boxes (思维模拟,有坑,时光倒流)
- mPaaS-RPC 拦截器各种场景下的使用指南
- SQLSERVER对数据表进行分区
- 推断一个图片是不是伪造的方法
- mercurial使用_使用Mercurial在SQL数据库中对象更改的修订历史记录
- 计算机设计思想 —— 解耦(分离)与内聚
- jogamp:MAC机,有的能正常运行,有的直接崩溃
- csgo开发者控制台指令大全_csgo控制台指令大全 csgo控制台命令一览
- 电脑进不了,电脑进不了系统,小编教你怎么解决电脑进不了系统
- Unity2017 经典游戏开发教程 算法分析与实现 (张帆 著)
- 开发板浮点型运算能力测试
- vue点击事件添加html,vue 中拼接html时添加点击事件
- 数组表示一个数加一的解决思路及JAVA代码实现
- Linux查看CPU核数
- 【实习项目】Git使用规范
- STM32F107的时钟设置由25M修改成8M
- 计算机嵌入式课程置换论文,嵌入式课程学习论文
- 列出美国每个州及一个邮编
- PowerPCB 快捷命令
热门文章
- python D28 粘包
- javascript excel
- 2014-01-01
- 2.2. 3.调度算法的评价指标
- linux标准I/O——流的打开和关闭
- Leetcode--96. 不同的二叉搜索树(java)
- 【剑指offer】面试题30:包含min函数的栈(Java)
- Leetcode--198. 打家劫舍
- 复制给节点的命令_深入理解redis主从复制原理
- linux int64_t 头文件,这对int64_t的处理是GCC和Clang的错误吗?