前言:
本文演示了
- 如何安装配置babel基本命令
- 如何安装配置babel插件
- 如何配置.babelrc文件
- 如何安装配置babel预设presets
正文:
babel 是一个强大的js编译器,功能包括不限于:
- es6编译成es5语法;
- 编译jsx语法
安装配置babel
首先,创建项目目录,初始化npm
$ mkdir babel
$ cd babel
$ npm init
$ mkdir src
$ cd src
$ touch app.js
$ cd ../
以上命令执行完之后的项目目录:
安装babel-cli
$ npm i -D babel-cli
编辑app.js
现在我们尝试着用babel编译app.js
$ babel src/app.js
此时,命令行会提示找不到相关命令:
原因是我们的babel并没有全局安装(全局安装命令:npm i -g babel)。
当前babel安装目录: node_modules/.bin/babel
所以我们在这里应该执行命令:
$ node_modules/.bin/babel src/app.js
或者,配置一下package.json文件,
然后,执行命令:
$ npm run babel
命令执行完毕,发现编译完成的app.js并没有任何变化。这是因为babel功能太强大,它能做的工作很多,在你告诉它要干什么之前,它不会进行任何工作。babel的工作是基于插件的,没有插件babel将一无是处。
安装配置babel插件 plugins
在我们的app.js中,我们需要编译那箭头函数和class的插件,即 es2015-arrow-functions、es2015-classes
首先安装我们的插件
npm i -D babel-plugin-transform-es2015-arrow-functions babel-plugin-transform-es2015-classes
配置我们的paskage.json文件:
执行命令:npm run babel 编译成功!
如果我们要使用的插件非常多,那plugins=后面的内容将会非常长。
将babel配置写入 .babelrc
在项目中新建 .babelrc 文件:
$ touch .babelrc
编辑.babelrc文件:
编辑package.json文件:
执行命令: npm run babel 编译成功!
那是不是我们每次使用一种语法就需要在.babelrc的plugins对应的数组中增加一项呢?答案当然是不用这么麻烦!
这里就扯出了 babel预设。
presets
Presets 是可共享的 .babelrc
配置或者只是一个 babel 插件的数组。
babel-preset-env 预设 可以编译es2015、es2016、es2017代码为es5代码
$ npm i -D babel-preset-env
配置 .babelrc 文件:
执行 npm run babel ,编译成功!
这里编译成功后并没有生成编译后的新的js文件,改一下package.json配置即可:
需要注意,这里需要手动的创建dist目录,否则执行 npm run babel的时候会报错找不到相关路径。