ES6学习 Babel 配置

作者: 希伯来没有雨 | 来源:发表于2017-03-15 10:37 被阅读185次

原文链接:http://es6.ruanyifeng.com/
源码地址:https://github.com/NalvyBoo/nodesES6/

Babel配置

配置文件 .babelrc

使用Bable的第一步,在项目根目录下新建并配置文件 .babelrc
window 环境下,命名 .babelrc. 生成配置文件
该文件来设置转码规则和插件,基本格式如下

{
    "preset":[],
    "plugins":[]
}

preset 字段设定转码规则,可以根据需要安装

# ES2015转码规则
$ npm install --save-dev babel-preset-es2015

# react转码规则
$ npm install --save-dev babel-preset-react

# ES7不同阶段语法提案的转码规则(共有4个阶段),选装一个
$ npm install --save-dev babel-preset-stage-0
$ npm install --save-dev babel-preset-stage-1
$ npm install --save-dev babel-preset-stage-2
$ npm install --save-dev babel-preset-stage-3

将这些规则加入 .babelrc

{
    "presets": [
      "es2015",
      "react",
      "stage-2"
    ],
    "plugins": []
}

以下所有Babel工具和模块的使用,都必须先写好 .babelrc

全局安装 babel-cli

$ npm install --global babel-cli

基本用法如下

# 转码结果输出到标准输出
$ babel example.js

# 转码结果写入一个文件
# --out-file 或 -o 参数指定输出文件
$ babel example.js --out-file compiled.js
# 或者
$ babel example.js -o compiled.js

# 整个目录转码
# --out-dir 或 -d 参数指定输出目录
$ babel src --out-dir lib
# 或者
$ babel src -d lib

# -s 参数生成source map文件
$ babel src -d lib -s

项目安装 babel-cli

$ npm install --save-dev babel-cli

配置 package.json ,将 src文件夹 编译到 js 文件夹

{
  // ...
  "devDependencies": {
    "babel-cli": "^6.24.0"
  },
  "scripts": {
    "build": "babel src -d js"
  },
}

转码执行命令

$ npm run build

babel-bode

改写 package.json

{
  "scripts": {
    "script-name": "babel-node script.js"
  }
}

上面代码中,使用 babel-node 替代 node ,这样 script.js 本身就不用做任何转码处理。


相关文章

  • ES6 配置运行环境

    本节我们来学习配置 ES6 的 JavaScript 运行开发环境,通过 babel 把 ES6 转码为 ES5 ...

  • Webpack+React+ES6配置

    一.配置ES6 1.安装插件 babel-loader,babel-preset-es2015,babel-pre...

  • webpack4知识点—babel

    解析es6:使用babel-loader 先下载依赖包 babel的配置文件是.babelrc babel-loa...

  • webpack babel 使用方法整理

    webpack babel-loader 基础配置 Babel ES6对JavaScript做了大量改造,加入了大...

  • ES6模块化

    今天说一下ES6的模块化,使用babel进行编译。babel+webpack配置: .babelrc文件的配置 下...

  • ES6

    先上文档地址:ES6入门 Babel 配置Babel,首先安装Babel,再建立项目文件夹,根目录下创建.babe...

  • Babel 中的 plugins 与 presets

    在用 JavaScript 开发项目时,常常需要配置 Babel。Babel 是代码转换器,比如将 ES6 转成 ...

  • webpack之资源解析

    解析ES6 使用babel-loader babel的配置文件是:.babelrc 安装依赖,其中i是instal...

  • Webpack(三):babel之配置文件.babelrc

    一:理解 babel之配置文件.babelrc 基本配置项 1. 什么是babel? 它是干什么用的? ES6是2...

  • 深入理解babel之配置文件

    一:理解 babel之配置文件.babelrc 基本配置项 1. 什么是babel? 它是干什么用的? ES6是2...

网友评论

    本文标题:ES6学习 Babel 配置

    本文链接:https://www.haomeiwen.com/subject/cuclnttx.html