时间戳

首页 > 技术文章 > Babel的安装和使用

Babel的安装和使用

anans 2019-03-29 14:53 原文

安装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"
  },
 

第二种方法安装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"
  },
 

推荐阅读