Babel简单学习笔记

最新推荐文章于 2024-09-10 18:03:27 发布

野草_前端

最新推荐文章于 2024-09-10 18:03:27 发布

阅读量1.4k

点赞数

分类专栏： JavaScript 文章标签：前端开发前端

本文链接：https://blog.csdn.net/fen747042796/article/details/70198876

版权

JavaScript 专栏收录该内容

24 篇文章 0 订阅

订阅专栏

ES6出来很久了，项目中没有用到，我也一直没仔细去看。一直抱着先把ES5打扎实再说，然后时间在不知不觉中过去了。我还是了解地太少太少了。终于，开始踏出接触新知识的第一步了。

Babel的作用就是将ES6代码转译成现代浏览器基本都支持的ES5代码。本文简单记录Babel的入门。

文章较水，就是以自己的理解整理网上现有的一些资源教程，供自己参考。

安装

先把安装Babel命令行工具和预设置：

npm install --save-dev babel-cli babel-preset-env

可能的转码规则：

# 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

其他可能用到的npm包：

"babel-core"      // Babel的API代码
"babel-node"      // 直接运行ES6脚本
"babel-loader"    // 在webpack中使用的加载器  
"babel-register"  // 自动对require的.js .jsx .es .es6进行转码
"babel-polyfill"  // 支持ES6的一些新特性，比如Generator，Promise
"babel-plugin-transform-runtime" // 运行时按需加载polyfill

配置

在项目根目录下创建一个.babelrc文件，配置相关属性如下。

{
  "presets": [                       //预设置的语法
    "es2015",
    "stage-2"
  ],  
  "plugins": ["transform-runtime"],  //插件
  "comments": false,                 //除掉脚本中的注释 
}

也可以在package.json文件中配置：

{
  "name": "my-package",
  "version": "1.0.0",
  "babel": {
    // babel相关属性配置
  }
}

使用

利用npm script的形式，在package.json中编写脚本：

 {
   // ... 
   "scripts": {
     "build": "babel src -d lib"
   },
 }

运行时执行以下命令：

npm run build

Babel命令行的语法如下：

 # 转码结果输出到标准输出
 $ 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了。

参考资料：

转载请注明出处：http://blog.csdn.net/fen747042796 野草园

欢迎关注我的知乎：野蛮的小小芬