神奇的babel

2024-09-04 21:18

文章标签 神奇 babel

本文主要是介绍神奇的babel，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

2015年，ECMA推出es6，在es5的基础上添加了各种人性化开发的新特性，详见es2015

让人头疼的是当下主流浏览器的JS引擎并不识别es6语法，所以我们需要将es6的语法翻译成es5的形式再提交给js引擎执行。

那有没有好的工具来实现两种标准之间的转换呢，有，babel。

好，既然用到babel，那么第一步肯定要在项目中安装babel。安装的方法可参照点击打开链接

npm install --save-dev babel-loader babel-core

babel安装成功后，如何在项目中使用呢？假设我们有待打包的js文件——app.js

很明先我们用到了es6的新特性，我们要做的就是将这些新特性转换成js引擎识别的语法并执行成功

好，在进阶webpack 中介绍了webpack生成新页面并自动引入打包后的js文件，那我们就将app.js打包后放入新生成的html文件中执行，显然，目前是无法执行的，因为我们并没有配置任何babel相关的参数。如何配置参数呢？

打开点击打开链接

打开latest后，看到latest安装方法

npm install --save-dev babel-cli babel-preset-latest//babel-cli不是必需

具体的安装过程就不展示了，接下来我们完善webpack-config-js配置文件，在这之前，先介绍一下loader参数—— using loaders，同时推荐一篇不错的中文博文点击打开链接

在这里对于loader的具体介绍就不展开说了，直接贴出参数配置规范

module: {loaders: [{ test: /\.jade$/, loader: "jade" },// => "jade" loader is used for ".jade" files{ test: /\.css$/, loader: "style!css" },// => "style" and "css" loader is used for ".css" files// Alternative syntax:{ test: /\.css$/, loaders: ["style", "css"] },]
}

好，我们应用到webpack-config-js配置文件中