这里定义一个简单的方法,添加到Array.prototype上,为了简单,并没有做太多的异常检测,接着在代码中引入以上方法并优先执行,就可以做到在不兼容这个方法的js环境总直接调用Array.protorype.includes方法了:
现在来实现一个简单的编译器,当然只支持箭头函数
function translate(src){
let [_, name, args, body]=src.match(/\((.+)\)=>(.+)/)
return `function ${name}(${args}){return ${body}}`
}
为了简单,只是使用简单的正则提取来做实验,并且不做任何异常处理
translate('var add=(num1, num2)=>num1+num')
// var add=function(num1, num2){return num1+num2}
将转化结果保存成文件,就可以在不兼容箭头语法的环境中使用了。甚至我们可以在浏览器中嵌入这个编译器,将源码编译之后使用Function构造函数或者eval来执行,达到执行新语法的作用,这种情况下,称为运行时编译器,当然一般不会这么用。
使用babel
很明显,不可能自己写这么一个编译器,那还要不要做项目了?这时候只能借助社区的力量了,babel就是这么一个东西,接下来将会使用babel来解析箭头函数
初始化一个项目
$ mk babel-demo
$ cd babel-demo
$ npm init -y
安装babel:
注意:(babel7以后babel相关的库基本都是放在@babel命名空间下)
$ npm install --save-dev @babel/core @babel/cli @babel/plugin-transform-arrow-functions
@babel/core:核心库
@babel/cli:命令行工具
@babel/plugin-transform-arrow-functions:箭头函数语法转化插件
编写代码:
var add=(num1, num2)=>num1+num2
使用babel
解析
$ npx babel --plugins @babel/plugin-transform-arrow-functions index.js -o bundle.js
上面命令的意思是将index.js使用babel转化,并将结果放到bundle.js中,执行之后,将会生成bundle
--plugins:为这次转化添加插件支持
-o:输出文件
查看转化结果
查看新生成的bundle.js,可以发现,箭头函数被转化成了普通的funciton, 在任何环境中都支持。
var add = function (num1, num2) {
return num1 + num2;
};
说明
所以,对于新特性,我们可以通过使用polyfill
,也可以通过语法转化来达到兼容。
babel配置文件
很明显,使用babel cli的局限性很大,容易出错、不直观、繁琐等,所以babel还是支持配置文件的方式:
.babelrc方式
在项目新建.babelrc文件,并使用JSON语法配置
{
"presets": [...],
"plugins": [...]
}
直接写在package.json的babel节点
{
"name": "my-package",
"version": "1.0.0",
"babel": {
"presets": [ ... ],
"plugins": [ ... ],
}
}
babel.config.js方式
module.exports = function () {
const presets = [ ... ];
const plugins = [ ... ];
return {
presets,
plugins
};
}
两种方式大同小异,区别就是一个是动态的,一个是静态的,推荐小项目就用.babelrc,大项目就使用babel.config.js
babel配置之plugin
plugin是babel中很重要的概念,可以说,plugin才是构成babel扩展性的核心,各种各样的plugin构成了babel的生态,可以在这里看一些babel的插件列表。
.babelrc配置文件中配置插件
{
"plugins": ["@babel/plugin-transform-arrow-functions"]
}
这时候我们再执行npx babel index.js -o bundle.js,就可以不指定plugin也能正常转化箭头函数了
如果一个plugin可以配置参数,则可以这么配置:
{
"plugins": [
["@babel/plugin-transform-arrow-functions", { "spec": true }]
]
}
babel配置之preset
在一个项目中,我们总是要配置一大堆的插件,这个时候,就是preset出马的时候了,那什么是preset呢?其实就是预置插件列表了,引入了一个preset就包含了一个系列的plugin
比如preset-react就包含了以下插件:
@babel/plugin-syntax-jsx
@babel/plugin-transform-react-jsx
@babel/plugin-transform-react-display-name
.babelrc配置preset-react
{
"presets": ["@babel/preset-react"]
}
如果有配置项,就酱:
{
"presets": [
[
"@babel/preset-react",
{
"pragma": "dom", // default pragma is React.createElement
"pragmaFrag": "DomFrag", // default is React.Fragment
"throwIfNamespace": false // defaults to true
}
]
]
}
babel和webpack
添加webpack.config.js
const path=requrie('path')
module.exports={
entry:path.resolve(__dirname, 'index.js'),
output:{
path: path.resolve(__dirname, 'dist'),
filename:'bundle.js'
},
module: {
rules: [
{ test: /\.js$/, use: 'babel-loader' }
]
}
- 添加相关依赖
$ npm install --save-dev webpack webpack-cli babel-loader
"
- `webpack`:`webpack`核心库
- `webpack-cli`:`webpack`命令行工具
- `babel-loader`:`babel`的`webpack loader`
打包
$ npm webpack
查看编译结果
省略无关的东西,可以看到,箭头函数也被转化成了function
/***/ "./index.js":
/*!******************!*\
!*** ./index.js ***!
\******************/
/*! no static exports found */
/***/ (function(module, exports) {
eval("let add = function (num1, num2) {\n return num1 + num2;\n};\n\nmodule.exports = add;\n\n//# sourceURL=webpack:///./index.js?");
/***/ })
/******/ });
支持es6
支持es6可以使用@babel/present-env来代替一系列的东西,还有许多的配置像,比如兼容的浏览器版本,具体可以看这里
安装依赖包
$ npm install --save-dev @babel/preset-env
配置
{
"plugins": ["@babel/present-env"]
}
打包
$ npm webpack
查看效果
/***/ "./index.js":
/*!******************!*\
!*** ./index.js ***!
\******************/
/*! no static exports found */
/***/ (function(module, exports) {
eval("let add = function (num1, num2) {\n return num1 + num2;\n};\n\nmodule.exports = add;\n\n//# sourceURL=webpack:///./index.js?");
/***/ })
/******/ });
总结
这只是babel
功能的一个小览,了解一下babel
的基本使用和一些概念而已。
以上就是es6中babel的用法介绍(代码示例)的详细内容,更多请关注 第一PHP社区 其它相关文章!