使用Babel将es6转换es5
大家好，又见面了，我是你们的朋友全栈君
目录
Babel是什么?
Babel是一个javascript编译器即一个工具链，主要用于在旧的浏览器或环境中将ECMAScript2015+代码转换为向后兼容版本的javascript代码。
命令行转换babel-cli
全局环境下进行Babel转换。这意味着，如果项目要运行，全局环境必须有Babel，也就是说项目产生了对环境的依赖。
安装
1) 安装 babel-cli
$ sudo npm install –global babel-cli
2) 安装预设
$ npm install –save-dev babel-preset –latest
3) 在项目中添加配置文件
在当前项目的根目录下创建该文件 vim .babelrc
{ “presets”:[“latest“] }
**:红色标注的要保持一致,具体原因请看后面的配置文件信息
使用
转换结果输出到标准输出
$ babel example.js
将结果输出到指定文件
$ babel example.js -o index.js
整个目录转码 –out-dir 或 -d 参数指定输出目录
$ babel src -d lib
配置文件
Babel的配置文件是.babelrc,存放在项目的根目录下。使用Babel的前，应先配置这个文件。该文件用来设置转码规则和插件，基本如下:
{ “parsets”:[], “plugins”:[] }
parsets字段设定转换规则，官方提供以下规则集。
ES2015转码规则
$ npm install babel-preset-es2015 –save-dev
最新转码规则
$npm install babel-preset-latest –save-dev
不会过时的转码规则
$npm install babel-preset-env –save-dev
最后将这些规则加入.babelrc.例如 将最新转码规则加入
{“presets”:[“latest”]}
babel-polyfill
Babel默认只转换新的javascript语法，但并不转换新的API，比如 Generator、Set、Symbol、promise等全局对象，以及一些定义在全局对象上的方法都不会转码。如果想让这些方法运行则必须使用babel-polyfill。
安装
$ npm install –save babel-polyfill
在js中使用
require(“babel-polyfill”);
将Babel集成到webpack中
Babel配置
1) 安装babel-loader与babel-core
$ npm install babel-core babel-loader –save-dev
2)安装预设
$ npm isntall babel-preset-latest –save-dev
3)配置.babelrc
{“presets”:[“latest”]}
webpack配置
1)安装webpack
$ npm install webpack webpack-cli –save-dev
2)添加配置文件 webpack.config.js
const path=require(‘path’); module.exports={ entry:’./index.js’, output:{ filename:’bundle.js’, path:path.resolve(__dirname,’dist’) }, module:{ rules:[{ test:/\.js$/, use:’babel-loader’ }] } }
3) 修改package.json
“scripts”:{ “build”:”webpack” }
4)打包
$ npm run bulid
可能会报如下错误:
cdCannot find module ‘@babel/core’ babel-loader@8 requires Babel 7.x,如果按我上面步骤我们装的babel-loader是8.0.4版本，因为我们只需要重新装7版本。
npm install babel-loader@7 –save-dev
拓展
npm中 save与 save-dev区别
–save
会将依赖安装到package.json 中的 dependencies中
–save-dev
会将依赖安装在package.json中的devDependencies
"dependencies"：应用程序在生产中需要这些包,即项目上线后所依赖的环境。
"devDependencies"：这些包仅用于开发和测试,即开发中所需要的产品中就不需要。
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/193549.html原文链接：https://javaforall.cn