Babel的安装和使用
2024-10-07 07:10:00
安装Node.JS 和 npm,如未安装可参照其他文章
1.创建一个package.json
npm init (回车, 一直下一步即可)
安装 Babel
npm install --save-dev babel-cli
测试是否安装成功
./node_modules/.bin/babel --help 查看帮助
安装ECMAScript6/2015 (ES6/ES2015)
npm install --save-dev babel-preset-latest
在项目根目录创建 .babelrc 配置文件
{
"presets": ["latest"]
//或者,二选一
"presets": ["es2015"]
}
配置完成后, babel可以把我们es6的语法转换成es5的语法
新建一个main.js文件
在 main.js 内写入一下es6的代码
var fn = (a,b) => a + b;
终端执行
./node_modules/.bin/babel main.js(编译的文件)
执行完成可以在终端看到转换后的代码
从Babel 6.0开始, 不再直接提供浏览器版本, 而是要用构建工具构建出来. 如果你没有或不想使用构建工具, 可以通过安装5.x版本的babel-core 模块获取
1-安装
npm install babel-core@5
2-编写测试文件
在跟目录新建一个html文件, 比如 index.html
引入 browser.js 和 browser-polyfill.js 两个文件, 这两个是必须引入的问题件
<script src="./node_modules/babel-core/browser.js" type="text/javascript"></script>
<script src="./node_modules/babel-core/browser-polyfill.js" type="text/javascript"></script>
3-另外引入我们编写的es6代码的js文件
注意: browser.js 是 Babel 提供的转换器脚本, 在引入我们编写的es6的文件时, script 标签的 type 需要是 "text/babel"
<script type="text/babel" src="./main.js"></script>
4-开启一个浏览器服务, 在浏览器端显示效果
browser-sync start --server
在开启一个服务器时候你可能遇到以下两个问题
1.-bash: browser-sync: command not found
解决方案:
加载该模块
npm install -g browser-sync
2-运行index.html时候报错 Cross origin requests are only supported for protocol schemes: http, data,chrome-extension, https, chrome-extension-resource.
解决方案:
( 需要替换路径中的yourname )
open -n /Applications/Google\ Chrome.app/ --args --disable-web-security --user-data-dir=/Users/yourname
package.js 添加, 然后打包 npm run build
"scripts": {
"build": "babel js.js --out-file bunder.js"
},
"build": "babel js.js --out-file bunder.js"
},
第二种方法安装babel 每次手动打包
本地文件 npm init 创建package.json
npm install babel-cli --save-dev
npm install babel-preset-es2015 --save-dev
在项目根目录创建 .babelrc 配置文件
{
"plugins": [],
"presets": ["latest"]
//或者,二选一
"presets": ["es2015"]
}
package.js 添加, 然后打包 npm run build
"scripts": {
"build": "babel js.js --out-file bunder.js"
},
"build": "babel js.js --out-file bunder.js"
},
最新文章
- Html中Table的简单使用
- string函数分析
- bool?
- 嵌入式LINUX入门到实践(二)
- android布局2
- 【G-BLASTN 1.0正式发布】
- struts2中从数据库中读取数据,并在JSP页面中遍历保存有JavaBean对象的List对象
- Qt QToolTip 控件背景的 QSS 设置方法(摘抄)
- Layered Windows窗口的半透明效果
- Linux简介与安装
- mysql数据库 调优
- bzoj 4565 状压区间dp
- 人工智能初识(百度ai)
- RabbitMQ消息队列(六)-消息任务分发与消息ACK确认机制(.Net Core版)
- 2018年1月20日上海MVP线下技术分享会纪实
- jmeter接口测试实例7-关联
- 【转】Gulp入门基础教程
- UVa 11991 一道简单题
- Python Flask高级编程
- loadrunner 的Administration Page里面设置