💎一站式轻松地调用各大LLM模型接口,支持GPT4、智谱、星火、月之暗面及文生图 广告
## babel > Babel 把用最新标准编写的 JavaScript 代码向下编译成可以在今天随处可用的版本。 这一过程叫做“源码到源码”编译, 也被称为转换编译。 > 通俗的说,就是我们可以用ES6, ES7等来编写代码,Babel会把他们统统转为ES5。 * [babel-core](https://github.com/babel/babel/tree/master/packages/babel-core) 调用Babel的API进行转码 * [babel-loader](https://github.com/babel/babel-loader) babel-loader加载器 * [babel-preset-es2015](https://github.com/babel/babel/tree/master/packages/babel-preset-es2015) 用于解析 ES6 * [babel-preset-react](https://github.com/babel/babel/tree/master/packages/babel-preset-react) 用于解析 JSX * [babel-preset-stage-0](https://github.com/babel/babel/tree/master/packages/babel-preset-stage-0) 用于解析 ES7 提案 1、安装`babel`。 `npm install --save-dev babel-core babel-loader babel-preset-es2015 babel-preset-react babel-preset-stage-0` 2、新建babel配置文件`.babelrc`,新建文件名字后面再加一个. 就能创建这类型文件。 `touch .babelrc` ~~~ /* .babelrc */ { "presets": [ "es2015", // es6 "react", // jsx "stage-0" // es7 ], "plugins": [ "react-hot-loader/babel" ] } ~~~ 3、修改`webpack.dev.config.js`,增加`babel-loader`的配置! ~~~ 'use strict' const path = require('path') module.exports = { /*入口*/ entry: path.join(__dirname, 'src/index.js'), /*输出到dist文件夹,输出文件名字为bundle.js*/ output: { path: path.join(__dirname, './dist'), /*输出目录*/ filename: 'bundle.js' /*输出文件名*/ } // 新增: /*include:包含,src文件夹下面的以.js结尾的文件,要使用babel解析*/ /*cacheDirectory是用来缓存编译结果,下次编译加速*/ module: { rules: [{ test: /\.js$/, use: ['babel-loader?cacheDirectory=true'], include: path.join(__dirname, 'src') }] } } ~~~ 现在就能正确转义ES6语法了。 4、修改`src/index.js` ~~~ /* 使用es6的箭头函数 箭头函数不需要配置也能用,大概是因为认可度比较高的关系吧哈哈~ */ let func = str => { document.getElementById('app').innerHTML = str /* 解构就需要配置babel */ var arr = [{name: 'zep'}, {age: 22}, {jog: 'Engineer'}] var [first, ...age] = arr console.log(age) var obj = {name: 'zep', age: 22, job: 'Engineer'} var {name, ...other} = obj console.log(name) // 打印除了第一个属性外其他全部属性,解构的是数组就必须用数组包起来,对象同理 } func('我现在在使用Babel!') ~~~ 5、执行打包命令 `webpack --config webpack.dev.config.js`。 直接打开`index.html`,可以看到输出的效果。可以直接打开dist里面的`bundle.js`,看到被转换后的ES5代码。 Q: `babel-preset-state-0,babel-preset-state-1,babel-preset-state-2,babel-preset-state-3`有什么区别? A: 每一级包含上一级的功能,比如 state-0包含state-1的功能,以此类推。state-0功能最全。具体可以看这篇文章:[babel配置-各阶段的stage的区别](https://www.vanadis.cn/2017/03/18/babel-stage-x/) 参考地址: 1. [https://segmentfault.com/a/1190000008159877](https://segmentfault.com/a/1190000008159877) 2. [http://www.ruanyifeng.com/blog/2016/01/babel.html](http://www.ruanyifeng.com/blog/2016/01/babel.html)