什么是babel?

babel是一个强大的多用途js编译器 点击进入

babel配置文件

通过.babelrc来表示

presets用来存放一些预设

plugins用来存放一些插件

命令行的简单使用

我们可以通过 -o (--out-file) 参数来编译一个文件

babel es6.js -o es5.js / babel es6 --out-file es5.js

如果我们想编译整个目录 -d (--out-dir)参数

babel src -d build / babel src --out-dir build

预设

现在有一段es6的代码,我们想要使用babel来编译这段代码,目前来说通过编译后的代码几乎是原封不动的复制了过来

es6.js

我们可以安装babel-preset-es2015来解析es2015的语法

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

然后通过配置.babelrc文件

这样我们就可以进行对es2015语法解析了。最后通过配置package.json的scripts

接下来直接在命令行

npm run build

插件

在babel中有很多很多的插件,例如我们要将下面一段代码转换成umd的形式,该如何做呢?

首先找到对应的插件babel-plugin-transform-es2015-modules-umd,安装该插件

npm install --save-dev babel-plugin-transform-es2015-modules-umd

在配置中引入

然后编译后就是我们想要的了

集成gulp

babel可以单独使用,也可以配合构建工具(gulp webpack等)进行结合

首先要下载gulp 和gulp对应的babel插件

npm install gulp gulp-babel --save-dev

创建gulp配置gulpfile.js

配置下package.json中的scripts

最后执行命令

npm run dev

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持编程之家！