梦里Babel知多少(一)
来源:互联网 发布:mac osx 10.9 下载 编辑:程序博客网 时间:2024/03/29 12:59
平时开发中,经常需要用到ES6/ES7的语法。那么就需要用到Babel来对代码进行转码处理。
之前用Vue比较多,所以以Vue-cli作为参考来分析。
第一张图是几个月前的Vue-cli生成的
第二个图是今天使用Vue-cli生成的
Babel-core
顾名思义,这是 babel
的核心代码,但是在我们构建的时候不会直接调用 babel-core
。它是一个标准库,通常服务于各种 polyfill
等库,比如 babel-runtime
, babel-plugin-transform-runtime
, babel-polyfill
等。
Babel-loader
通常在我们使用webpack的时候,我们会先安装 babel-loader
来作为加载器。
babel-preset-env
稍后介绍
cnpm i babel-loader babel-core babel-preset-env -D
这样在webpack中,可以这样
module exprots = { entry: __dirname + '/main.js', output: { path: __dirname + '/public', filename: 'bundle.js' }, module: { rules: [ { test: /(\.jsx|\.js)$/, use: { loader: 'babel-loader', options: { presets: ['env'] } }, exclude: /node_module/ } ] }}
Babel-preset-es2015
之前的都是介绍的 babel-core
babel-loader
并不能转码,而当我们想使用ES6语法时候就需要用到 babel-preset-es2015
这个包可以对 es2015 代码进行转码为ES5语法。当然如果使用了ES7语法,即async await 等语法,还是不能够支持的。
安装:
cnpm i babel-preset-es2015 -D
在使用webpack构建工具时,我们通常不会在webpack.config.js里直接对 babel
进行配置。而是在根目录下创建一个 .babelrc.js
的文件。
/* webpack.config.js */module exprots = { entry: __dirname + '/main.js', output: { path: __dirname + '/public', filename: 'bundle.js' }, module: { rules: [ { test: /(\.jsx|\.js)$/, use: { loader: 'babel-loader' }, exclude: /node_module/ } ] }}
/* .babelrc.js */{ "presets": ["es2015"]}
需要特别注意的是, babel-preset-es2015
虽然可以对ES6转码,但是它只会对ES6的语法进行转码,并不会对API进行转码。也就是说它可以对箭头函数,promise转码,但不会对Array.from,Array.find等转码。
所以为了能够使用ES6的API,我们还需要进行更深入的配置。
Babel-plugin-transform-runtime
安装:
cnpm i babel-plugin-transform-runtime -D
使用:
/* .babelrc */{ "presets": ["es2015"], "plugins": ["transform-runtime"]}
这样就可以自由使用promise了。
但是这个方案有一些特点
特点:官方建议在 lib 上使用,因为该方案没有全局变量和 prototype
污染。
1,因为相当于是在沙箱操作,没有在全局对象中声明变量。
2,正是因为没有 prototype
污染,所以对于一些内置类型扩展的方法是没办法 polyfill
的。比如: Array.prototype.find
Array.prototype.filter
等。但是可以对静态方法进行 polyfill
。
优点: 可以按需引用。
Babel-polyfill
正是因为 babel-polyfill
的特点,让开发者通常使用 babel-polyfill
进行开发。
安装:
cnpm i babel-polyfill -D
使用:
/* main.js(入口文件) */import 'babel-polyfill'
这样就OK啦,在使用 babel-polyfill
后,就不需要引入 babel-plugin-transform-runtime
了,并且它在浏览器支持Promise
时使用 原生的promise
,如果不支持才会使用polyfill
。
但是最大的缺点就是不能按需引用,文件比较大。
- 梦里Babel知多少(一)
- 梦里Babel知多少(二)
- 梦里花落知多少
- 梦里花落知多少
- 梦里花落知多少
- 梦里花落知多少
- 梦里花落知多少
- 梦里花落知多少
- 梦里花落知多少
- ES6学习入门(一)babel
- 网络安全知多少(一)
- grunt里集成babel-grunt
- ES6(一: babel环境)
- 游戏引擎Platino---梦里花开知多少
- 使用babel将es6代码转成es5(一)
- 《汉字知多少》开发志(一)
- C++异常处理知多少(一)
- java解惑你知多少(一)
- springmvc导出excel弹出框,前端用ajax请求
- 一文理解深度学习,卷积神经网络,循环神经网络的脉络和原理4-循环神经网络,LSTM
- 隐性语义索引LSI
- Manacher 最长回文子串
- The Famous Clock
- 梦里Babel知多少(一)
- Oracle临时表空间当前使用的百分比
- Android源码基础解析之Activity布局加载流程
- 对象包装器和自动装箱
- Common(十二)—— JXML
- jdbc超简单连接
- HDU
- QT自绘标题和边框
- 如何进行自动化测试