很多文章都告诉我
babel的作用是将ES6的语法转换为ES5.
原因是很多浏览器现在目前还不支持ES6的语法.
我们最终的代码是被webpack打包成一个js文件,并运行在浏览器中的.
如果不将ES6的代码编译成ES5,那么在某些浏览器就无法正常运行我们的代码了.
道理谁都清楚,但是看不到配置babel之后的前后变化,心里还是有点小堵.
先不用babel插件,来编译ES6的代码.
有一个 arrowFn.js 的文件.
export default () => {
console.log('这是 es6 语法新增的箭头函数,在不支持es5的浏览器中,可能会出现无法执行的情况.')
}
在此代码中,export default & ()=> 都是属于 ES6 新增的语法.
在 index.js 中
import arrFn from './arrowFn'
arrFn()
这里的 import xxx from xxx 也是 ES6 中的语法.
现在先不配置 babel-loader,直接用 webpack 打包,看一下结果.
直接在终端运行
webpack index.js index.bundle.js
查看结果:
webpack仅仅只是打包而已
发现仍然是 ES6 的箭头函数.
这说明:webpack本身没有将ES6 -> ES5的能力.
webpack仅仅只是以一个.js文件为入口,处理之后所有木块之间的依赖关系,最终生成一个bundle.js 文件.仅此而已.
所以,es6->es5 就不能指望webpack,它也不是万能的.
使用babel处理ES6 -> ES5 的转码.
首先安装 babel 一系列的插件
npm i --save-dev babel-core babel-loader babel-preset-env
为了保证之后看博客能够正确运行,贴出它们的版本号:
"devDependencies": {
"babel-core": "^6.26.3",
"babel-preset-env": "^1.7.0",
"babel-loader": "^7.1.5"
},
-
babel-core: babel 转移的核心模块 -
babel-preset-env: 解析es6的包 -
babel-loader: babel的loader包
然后在 webpack.config.js 里添加下面这段代码.
const path = require('path')
module.exports = {
entry: path.join(__dirname, 'index.js'),
output: {
filename: 'bundle.js',
path: path.join(__dirname, 'dist'),
},
// 这里是添加的代码
module: {
rules: [{
test: /\.js$/, // 匹配后缀名为 .js 结尾的文件
use: 'babel-loader', // 使用 babel-loader 去处理
exclude: /node_modules/ // 排除.js文件路径中包含 node_moudles 的.js文件
}]
}
}
然后在当前项目目录添加一个 .babelrc 的文件.
创建.babelrc文件
为什么要创建这个.babelrc文件？
在 webpack 有各种各样的loader。
有的loader配置比较复杂，一般就会提供一个指定名字的文件作为它的配置文件。
而不是全部都在 webpack.config.js 里去配置。
对应的loader在工作的时候，会根据实现预定好的文件名字去读取相关配置。
这里的 babal-loader 如果发现 webpack.config.js 的 moudle.rules对应的节点没有这些具体的配置。
就会在同级目录下找一个叫 .babelrc 的文件，读取里面的配置。
此文件内部就是一个JSON数据.在里面键入
{
"presets": ["env"]
}
然后运行 npm run build
如果不出意外,打包将会成功.
babel配置并打包成功
然后打开打包成功的 bundle.js 文件.
image.png
箭头函数被 babel 编译成了 function.
未使用 babel打包的文件
对比一下.
很多博客讲到这里就结束了.
但是上述加载的那些包,'.babelrc' 文件里的配置是什么意思,基本都没有人说明.
我就简单说一下我自己的理解.可能错误,但是至少能够帮我们理解,这些配置每一步大概做了什么.
- 首先我们安装了3个babel相关的包
npm i --save-dev babel-core babel-loader babel-preset-env - 其次,我们在
webpack.config.js里配置了module.rules[0].test=/\.js$/module[0].use='babelloader'module[0].exclude=/node_moudle/
- 最后,我们新建了一个
.babelrc的文件,在内部写入的一串字符串{"presets": ["env"]}
第一个配置项:test:/.js$/
test:/.js$/
匹配后缀名是 .js 的文件.......说了等于没有,这么简单正则表达式谁都会....
那到底是什么时候匹配呢?
当 webpack 从入口的 index.js 一直到所有有依赖关系的 js 文件中,遇到了 import xxx from xxx 或者 require(xxxxxx) .
发现,后缀名是 .js 的时候,这个时候就是匹配的时候.
第二个配置:use:'babel-loader'
- 当匹配到.js文件后,webpack就会加载
babel-loader模块(其内部肯定依赖的babel-core模块) - 然后匹配到模块数据递交给
babel-loader.
交给 babel-loader 什么呢?做代码降级.
怎么降级babel-loader 已经知道了.肯定是降级到 ES5 .
但是目标代码是用啥写的呢?
ES3 ES7 SE8 ES100000(只是为了说明问题) ????
第三个配置:.babelrc presets:['env']
presets:['env']
- 通过
.babelrc.presets[0]===env,babel-loader 就知道我们写的是ES6代码. - 这也是众多文章和博客里写的所谓的"预设"
所以,最终我们配置 babel 的大体流程是.
- npm i --save-dev babel-core babel-loader babel-preset-env
- 在 import/require xxx.js 的时候,babel-loader 就根据 .babelrc 里配置的
env(babel-preset-env),知道它现在接受到的模块内容是用ES6写的. - 最终,babel-loader 借助 babel-core 也好 ,babel-preset-env 也罢,将ES6 -> ES5 的代码.
babel-配置-打包流程
网友评论