es6语言现如今已经是前端的必备更高级的语法了,其实它只是新的js规范,可以说是es5的升级版,作为前端人员不得不学的,这也是未来的趋势。但是可惜的是,现在大部分浏览器还不能兼容es6语法,为了保险,需要用转换工具转义成es5,用于发布环境当中。希望全面支持es6的那一天早点到来。
首先需要说明的是,编译的环境实在node下的,需要确保本地安装了node.js;
第一步:
进入文件根目录,初始化环境:npm init -y
第二部:
全局安装babel-cli:cnpm install babel-cli -g
第三部:
安装本地转换包:cnpm insatall --save-dev babel-preset-es2015 babel-cli
第四部:
在根目录下新建一个.babelrc文件,并新建内容:
{
"presets"
:
[
"es2015"
]
,
"plugins"
:
[
]
}
第五步:
在根目录下新建文件夹src,创建index.js的文件,用于编写es6语法的js;新建dist文件夹,创建index.js文
件,用于存储转换后的js
第六步:开始写代码(es6语法)
let fn = (num) => {
console.log(num);
};
fn(9);
第七部:
简化打包命令,并运行打包程序:将pakage.json文件里script标签下的内容改为
"scripts": {
"buld": "babel src/index.js -o dist/index.js"
}
运行build命令的时候其实是运行
babel src/index.js -o dist/index.js
用babel程序将src目录下的index.js文件转化到dist目录下的index.js文件
现在在控制台输入npm run build
此时打开dist目录下的index.js文件,已经是经过转换后的语言了
"use strict";
var fn = function fn(num) {
console.log(num);
};
fn(9);
这样就可以在html文件当中引用这个文件了,不用担心兼容问题。