运行es6

ES6很好用,但是写完之后怎么样最快的跑起来呢?也许你会觉得配个webpack打包工具就好了。其实这不是最方便的,而且一般我们用webpack是用来打包js源文件到浏览器中,以便引用这一个(或几个)entry文件即可。

如果我只是想当一个脚本或者一个nodejs的backend项目运行怎么弄?

单文件脚本

如果是单文件脚本。那你只需要安装npm install -g bable-cli到全局。然后你就可以执行babel xxx.js,会输出编译后的js文件内容。或者也可以输出到一个文件。关键你还可以直接执行babel-node xxx.js来执行js文件。不过babel-node本身支持的es6的特性比较少。比如letimport这种就不支持。需要加入preset/transform的支持才行。这样的话就跟下面要讲的多文件方式无异了。

多文件npm项目

所以,还是以项目的视角来弄比较好。一般也是这样的。假设,你已经通过npm init创建了一个npm的项目,并且已经把代码写好了。 - 首先还是要安装babel-cli,不过不需要加全局标志-g。这也是官方推荐的做法。 - 然后安装你需要的preset, 一般目前来说,es2015这个preset可以说是标配了。执行npm install babel-preset-es2015 --save-dev

好,准备工作已经好了。那么,接下来,你可以: - 直接执行文件。假设你的入口文件是index.js,那么你可以这么直接执行它:./node_modules/.bin/babel-node --presets babel-preset-es2015 index.js或者./node_modules/babel/bin/babel-node --presets babel-preset-es2015 index.js - 或者,如果它是一个模块项目,或者你想让别人import/require你的文件。那你需要把你的文件转译成标准的node文件。就是编译出来不执行。你可以把你的源文件放在src目录下,然后执行./node_modules/.bin/babel --presets babel-preset-es2015 src --out-dir dist,这样编译后的文件就都到dist目录下了。

配置npm的script

这里要说的是针对上面的你可以后面的简化。你可以注意到上面的执行语句总是那么长那么难看,有没有简单好用的方法。当然有!npm配置文件里有个script的模块,就是用来干这个事的。你可以添加对应的两项到package.json中: json ... "scripts":{ "index":"babel-node --presets babel-preset-es2015 index.js", "build":"babel --presets babel-preset-es2015 src --out-dir dist" }, ... 然后,以后每次执行npm run index就是执行index.js的效果,执行npm run build就是编译的效果。

关于Babel

有没有注意到上面到处充斥的babel这个字眼,没错,这个东西在es6代码转换上面相当火。同时你有没有注意到上面充斥的那些字眼里最恶心的就属--presets babel-preset-es2015这串,即使后面配到了npm的scripts里也还是有它。想不想干掉它?当你去研究了Babel后会发现,其实是可以的干掉它的。只要在项目目录下创建.babelrc,里面写入内容: json { "presets":["es2015"] } 然后上面出现的这恶心的一串都可以省掉。