es6 入门 ——— 运行环境的搭建

　　最近在看Vue的API，而后想本身着手作个项目，搭建 脚手架的时候发现，了解掌握 es6 又是必要的步骤，对于我这种，es5还没摸熟的小白来讲，仍是翻看了大神的书本，学了起来。这里只是作个简单的搭建，初步的入门。

　　因为如今大多数浏览器并不能像原声支持 es5 同样支持 es6，因此用 es6 第一步就是须要经过 Babel 转码器，将 es6 代码转为 es5 代码。Babel 给咱们提供 babel-cli 工具，用于命令行转码，安装命令以下，要在管理员模式下命令提示符输入：

1 npm install --g babel-cli                                                 

　　同时咱们还须要安装转码规则包， 官方提供了一些规则集，想要了解详细的有哪些，你能够去 阮一峰 大神的 《ECMAScript 6 入门》 这本书的第一章（1.ECMAScript 6 简介）第六节（Babel 转码器）中查看，这里我根据需求安装的是  babel-preset-react-es2015。

　　这里在安装规则包以前，先建立一个 目录，目录名称自定义，我这里命名为 babel-test，而后在此目录下再建立两个目录，命名为 es6 和 js，分别用来存放 es6 源代码和转码后的 es5 代码，文件结构以下：

　　　　

　　而后在 命令提示符里找到这个目录以后，使用命令 npm init -yes,结果以下图

　　　　

　　此时 bebel-test目录下生成一个默认的  package.json 文件，结构以下图：

　　　　

　　而后继续在当前目录下执行下面的命令 安装 es6转码规则包：

1 npm install babel-preset-es2015 --save-dev                    

　　继续在 es6 目录中建立一个 test.es6 文件用于写入 es6 源代码。此处因为 Babel 编译源文件时没有过多的限制，因此咱们能够选择使用 js 或者  es 做为文件后缀名。将下面的 es6 代码写到 test.es6 中：　　

1 let name = 'muzi_LEE'; 2 let greeting = `hello ${name}`; 3 console.log(greeting);

　　接下来咱们就能够用 babel 命令编译 es6 目录下的 test.es6 文件，输出为 js 目录下的 test.js ,代码以下所示：

1 babel es6/test.es6 --out-file js/test.js --presets es2015

　　运行成功之后，js 目录下就会自动生成 test.js，内容就是 转换的 es5 语法，如图：

　　

　　到这一步，咱们的 es6 语法已经被编译转换成了 es5 语法，此时的 test.js 就能够被引用了。

　　下一步，在 es6 目录中再建立 test2.es6 文件，此时 es6 目录下再也不是单一的文件，若是咱们想编译整个  es6 目录的源文件，又不想一个个文件的编译转换，只需使用下面的命令就能够编译整个目录下的 es6 源文件到 js 目录下，代码以下：

1 babel es6 --out-dir js --presets es2015

　　运行结果以下图：

　　

　　到目前为止，咱们的代码是在全局环境下，进行 Babel 转码。这意味着，若是项目要运行，全局环境必须有 Babel，也就是说项目产生了对环境的依赖。另外一方面，这样作也没法支持不一样项目使用不一样版本的 Babel。

　　解决的办法就是讲 babel-cli 安装在本地项目之中。命令提示符找到当前目录，在当前目录下执行以下指令：

1 npm install babel-cli --save-dev

　　而后把 package.json 里面的 script 修改成 以下：

1 "scripts": { 2     "build": "babel es6 --out-dir js --presets es2015"
3   }

　　修改完成以后，在转码的时候，就执行下面的命令便可：

1 npm run build

　　到此步， es6 的初步搭建已完成，但愿对你有用，同时有什么疑问，也能够在评论区提出。

 

 by： 木梓李