首先需要介绍一个ES6开发利器:Babel。
Babel是一个编译器,负责将源代码转换成指定的语法的目标代码,可以使之很好的在运行环境中执行我们的代码。下面我们就来详细介绍这个神器,利用它来编译我们的ES6代码。
Babel给我们提供了一个很方便的命令行工具:babel-cli,利用它我们可以在命令行中执行编译命令,我们只需使用npm来安装它即可:
npm install -g babel-cli
除此之外,我们还需要安装转码规则包,Babel支持很多语法的转码,比如我们想要将ES6转换成ES5,那么需要安装babel-preset-es2015包,如果我们想要编译React源码,就需要安装babel-preset-react,这里我们需要安装babel-preset-es2015。为此我们创建一个babel-test目录,在这个目录里我们创建两个目录,es6和js,分别用于放置ES6源代码和编译后的ES5目标代码,然后我们使用“npm init –yes”命令生成一个默认的package.json文件,babel-test目录结构如下图所示:
除此之外,我们还需要安装转码规则包,Babel支持很多语法的转码,比如我们想要将ES6转换成ES5,那么需要安装babel-preset-es2015包,如果我们想要编译React源码,就需要安装babel-preset-react,这里我们需要安装babel-preset-es2015。为此我们创建一个babel-test目录,在这个目录里我们创建两个目录,es6和js,分别用于放置ES6源代码和编译后的ES5目标代码,然后我们使用“npm init –yes”命令生成一个默认的package.json文件,babel-test目录结构如下图所示:
然后在当前目录执行下面这行命令安装ES6转码规则包:
npm install babel-preset-es2015 --save-dev
在es6目录中我们创建了一个test.es6文件用于写入ES6源代码,Babel编译源文件时没有过多的限制,所以我们也可以选择使用js或es作为文件后缀名。现在我们将下面这段ES6代码写入到test.es6中:
let name = 'Scott';
let greeting = `hello ${name}`;
console.log(greeting);
接下来我们就可以来运行babel的命令编译我们的ES6源代码了:
babel es6/test.es6 --out-file js/test.js --presets es2015
这行命令的含义是:编译es6下面的test.es6文件,输出文件为js下面的test.js,同时指定编译规则包为es2015。命令执行完成后,我们会在js目录中找到一个test.js文件,如图所示:
原文链接:https://blog.csdn.net/liuhe688/article/details/51212393