Babel初体验
来源:互联网 发布:木油漆哪个品牌好 知乎 编辑:程序博客网 时间:2024/06/17 08:25
原文地址:→传送门
写在前面
现在es6很流行,尽管各大浏览器都还不能支持它的新特性,但是小伙伴们还是很中意它呀,于是小小的学习的一下
Babel
这里我们不介绍es6相关内容,只是说下入坑前奏,记录下如何使用babel来对es6进行转码~
1.准备一个项目(文件夹)
进入到你的项目根目录下,使用下面命令初始化生成一个package.json文件
npm init
2.安装babel
使用下面命令安装全局babel-cli
npm install --global babel-cli
3.设置转码规则并安装插件
安装相关插件:
# 最新转码规则$ npm install --save-dev babel-preset-latest# react 转码规则$ npm install --save-dev babel-preset-react
现在根目录下新建一个.babelrc
文件并添加如下内容:
{ "presets":[ "latest", "react", ], "plugins": []}
新建一个src文件用于放ES6的代码,再新建一个lib文件用于存放转码后的代码,然后在src文件中新建一个index.js文件,里面放点es6的代码
let [x, y, z] = new Set(['a', 'b', 'c']);console.log(x);console.log(y);console.log(z);
这时候输入下面的命令就可以直接对index.js进行转码了额~
babel src/index.js --out-file lib/index.js或babel src/index.js -o lib/index.js
同时也可以使用 --watch
或-w
对转码文件进行监测文件内容的变化:
babel src/index.js --watch -o lib/index.jsbabel src/index.js -w -o lib/index.js
但是,如果src中有多个文件的话,上面这样就很繁琐,接下来要使用babel的命令来对文件夹下的.es6、.js等所有文件进行转码:
babel src -d lib
同时可将这行命令配置到package.json中的scripts中:
"scripts": { "compile":"babel src -d lib" },
下一次则直接使用npm run compile
即可完成编译。
也可以使用watch
对文件夹进行监测:
"scripts": { "compile": "babel src -d lib", "watch-compile": "babel src -d lib --watch" },
使用npm run watch-compile
命令就只有执行一次,就可以开开心心写ES6了~
阅读全文
0 0
- Babel初体验
- ES6 初体验 —— gulp+Babel 搭建ES6环境
- babel
- babel
- babel
- babel
- 想体验ES6语法?那用gulp+Babel来搭建ES6环境吧~
- babel && babel-preset-env
- Babel 用法
- babel 用法
- gulp-babel
- babel安装
- babel 6
- Babel入门
- babel学习
- 安装babel
- 初识Babel
- babel.html
- equals()与hashCode()
- SQL Server修改字段属性总结
- Python 直接赋值、浅拷贝和深度拷贝解析
- centOS7下的MySQL编码设置
- 【树形DP】宝藏
- Babel初体验
- Struts2值栈
- 汇编语言的基本知识
- 向360手机卫士学习如何优化android程序性能
- 第3周项目3 求集合并集
- cookie管理(2) session存储于内存
- Java中==、equals()和hashCode()的比较分析
- 怎样在Android开发中引用ButterKnife
- python_lintcode_111爬楼梯_110最小路径和