babel入门和那些坑
来源:互联网 发布:路小雨知乎 编辑:程序博客网 时间:2024/06/16 14:11
最初的babel只是单纯的ES6转ES5工具,随着应用范围越来越广,最新的babel6已经变成了一个转译平台,ES6转ES5只是其中一个插件的功能。
在线体验babel5
一般的大型项目都是使用webpack配置babel,这里为了便于学习,只简单说下如何单独使用babel和可能遇到的坑。
安装方式
1. 进入项目目录,安装babel-cli (babel6 cli) 和 babel-preset-env(插件集合)。
npm install --save-dev babel-clinpm install --save-dev babel-preset-env
此处的坑:
- 官方推荐将babel-cli安装在项目中,只在全局安装会导致项目对环境的依赖(当然项目里和全局都安装一遍也是可以的)
- babel6需要额外的转码插件才能实现转译,单独用babel-cli是无法转译的(与babel5不同)
- env只是JS语法转译插件,如果你需要使用ES6的API,必须另外安装babel-polyfill;如果你需要使用babel的API,必须另外安装babel-core;如果你需要转译JSX,需要另外安装babel-preset-react
建议:
- 项目内安装的babel无法在命令行使用babel命令(一般都是用package.json或webpack.conf.js来配置)。如果你想体验babel命令,可以在全局再次安装babel
- env是babel presets的一种,这里推荐使用env。它能针对特定的浏览器环境进行按需转码,通过配置env的targets,babel会只编译那些目标环境还不支持的特性。
2.项目目录内新建名为“.babelrc”的文件,添加以下内容,指定要使用的presets,以及相关配置
{ "presets": [ ["env", { //如果不设置 targets 属性,babel-preset-env 和 babel-preset-latest 效果相同 "targets": { //转码后支持chrome 52 "chrome": 52, //转码后支持的浏览器:市场份额>1%, 最新2个版本,ie版本大于8 "browsers": ["> 1%", "last 2 versions", "not ie <= 8"] } }] ]}
babel-preset-env的配置方法
此处的坑:
- windows7下无法右键新建”.babelrc”文件名,会报错“必须输入文件名”,可以使用sublime,webstorm等ide新建。
- 假如你使用了多个presets,请注意,presets是按照数组的index倒序(从数组最后一个到第一个)进行编译。所以请写成[“env”, “stage-2”],而不是[“stage-2”, “env” ]。
3.在项目的package.json内添加一个script,配置babel命令
"scripts": {//转译单个文件"build": "babel script.js --out-file script-compiled.js"//你也可以转译整个文件夹//"build": "babel src --out-dir lib"//你也可以转译单个文件并实时监控变化//"build": "babel script.js --watch --out-file script-compiled.js"}
//假如你在全局也安装了babel,可以不配置package.json,在命令行手动执行babel命令即可完成转码//babel script.js --out-file script-compiled.js
如何使用babel-cli命令
4.执行build命令,生成转码文件
npm run build
到这里,我们便实现了babel的简单应用。
如果你想了解babel的更多用法,比如babel-core, babel-register,请参考 阮一峰的Babel入门教程,和 babel官方文档
babel转换ES6是否有兼容性问题?
ES6的部分特性是无法用ES5的语法实现的,babel在转译这些内容时会直接跳过不转,或者直接报错。
使用babel时有哪些坑?
babel6 把 import 和 export 的转码逻辑都做了修改,转码后不再兼顾 commonJS。这对于那些同时使用commonJS模块语法和es6模块语法的同学来说, 简直就是巨坑。
1. 对export default {}的转码
如果希望对它的转码符合 commonJS,请安装 babel-plugin-add-module-exports插件,并在.babelrc 文件内声明该插件。
在 babel5 时代, export default {} 除了会被转译成 exports.default = {},还会加一句 module.exports = exports.default,这是为了兼顾commonJS规范。但在 babel6 时代,后面一句不再添加,这是为了区分commonJS和ES6的模块定义。
2. 对import xxx from xxx 的转码
import的模块所对应的js文件必须用export default {}导出,或者请参照第一条安装 babel-plugin-add-module-exports 插件。
道理同上,babel6重新定义了对 import 的转码,最终的转码相当于 require(xxx)[‘default’],相对应的, export default {} 会被转译成 exports.default = {},两者通过 default 属性导出和取得值,不再使用module.exports
3. 调试
JS转码之后调试很不方便,可以通过source map解决。babel本身就有该功能,可以在转译时生成相应的source map
babel script.js --out-file script-compiled.js --source-maps
- babel入门和那些坑
- Babel入门
- 高逼格Babel,快速入门
- Babel 入门安装
- Babel 入门指南
- Babel快速入门-1
- Babel转码器入门
- babel使用入门
- babel从入门到入门
- webpack和babel结合
- babel
- babel
- babel
- babel
- gulp和babel的安装
- 重温 Webpack, Babel 和 React
- babel - 使用Webpack和Babel来搭建React应用程序
- 【ECMAScript6标准入门】Babel之HelloWorld
- webpack构建React应用二:webpack的安装及基础使用
- jeecg {"empty":false,"reference":true,"viewName":"org/jeecgframework/web/crm/haTSubscription/messag
- [线段树][矩乘][DP]Codeforces Round 573D && RussianCodeCup Thanks-Round .Bear and Cavalry
- CDialog中创建CView窗口
- 剑指offer:第8题旋转数组的最小数字
- babel入门和那些坑
- ubunut,已经安装nginx,开启SSL模块
- verilog parameter localparam define使用
- L2-011 玩转二叉树
- 移动端touch事件---利用bootstrap实现轮播图手指左右滑动事件
- Java中 while与do--while 区别
- Flutter进阶—Firebase数据库实例
- JDK8.0 流stream 基本操作
- 如何给程序员做绩效考核