标签:创建 原理 install htm 目录 -- plugin html loader
Babel 是一个工具链,主要用于将 ECMAScript 2015+ 版本的代码转换为向后兼容的 JavaScript 语法,以便能够运行在当前和旧版本的浏览器或其它环境中。
// Babel 输入:ES2015 箭头函数 [1,2,3].map((n)=>n+1) // Babel 输出:ES5 语法实现的同等功能 [1,2,3].map(function(n){ return n+1 })
首先把原始代码转成抽象语法树(Abstract Syntax Tree,AST),然后基于这个 AST 做转换,每个转换被处理成插件的形式,最后把 AST 还原成代码。
这里使用 Webpack
npm install --save-dev babel-loader @babel/core @babel/preset-env
安装成功后,要在 webpack.config.js 中进行简单的开启 Babel:
module: { rules: [ { test: /\.js$/, exclude: /node_modules/, loader: "babel-loader"} ] }
上面的安装只是开启了 Babel,还没选择使用 plugin,接下来是进行 plugin 的配置:
在项目根目录创建 .babelrc 文件,文件内容如下:
{ "presets": ["@babel/preset-env"] }
(这里使用 presets 而非 plugin 的原因:presets 是 plugin 的集合)
标签:创建 原理 install htm 目录 -- plugin html loader
原文地址:https://www.cnblogs.com/Leophen/p/12721955.html