使用Babel编译ES6

  • A+
所属分类:开发者工具
Babel is a JavaScript compiler.

对于前端来说ES2015,ES2016,TypeScript这些已经不再是陌生的名词,不然就得好好补补课了。

但是这些还没有完全被浏览器所支持,所以Babel就是一个将ES2015,ES2016,TypeScript编译成浏览器可以完美运行的ES5语法的工具。下面说说Babel的安装和使用:

1.安装好nodejs和npm,安装过程略。

通过node -v 和 npm -v 来检查是否安装成功。

2.安装Babel(我在单独项目里进行安装,没有全局安装,因为在项目里安装了,打包给别人,别人只要有node环境就可以直接运行,不需要再安装Babel,当然要视情况而定。)

在命令行工具进入项目根目录

执行命令 npm init -f  ,然后会在项目根目录里生成一个基础的package.json文件

执行命令 npm install --save-dev babel-cli babel-preset-env 即可安装babel

npm list可以查看安装的依赖

babel-preset-env 这个插件包含了babel-preset-es2015babel-preset-es2016<em>babel-preset-stag</em>等,不包括babel-polyfillbabel-react

配置Babel

在package.json里面添加两项:

"build": "babel js/main.js --out-file js/es5.js" 这段意思是用babel编译js/main.js这个文件 并将编译后的文件输出到js/es5.js这个文件,在项目中就可以引入es5.js这个文件。

weinxin
我的微信公众号
我的微信公众号扫一扫

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: