这篇文章主要讲解了“Babel7的安装和配置方法”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“Babel7的安装和配置方法”吧!
Babel是一个JavaScript编译器。
Babel 是一个工具链,主要用于将 ECMAScript 2015+ 版本的代码转换为向后兼容的 JavaScript 语法,以便能够运行在当前和旧版本的浏览器或其他环境中。
从7版本,Babel的安装和之前是有区别的,这在安装的时候,要注意写对包名。
npm install --save-dev @babel/core @babel/cli @babel/preset-env npm install --save @babel/polyfill
之前的版本中,babel前边没有@符号。
上述命令是安装的当前开发的工作空间,如需全局安装,请把参数换成-g。
在工程的目录下边新建babel.config.js文件,当然新建6版本所使用的.babelrc文件也是能够进行使用的。
babel.config.js文件内容示例,targets是目标的浏览器版本,这个可以实际使用中进行修改。
const presets = [ [
"@babel/env",
{
targets: {
edge: "17",
firefox: "60",
chrome: "67",
safari: "11.1",
},
useBuiltIns: "usage",
}, ], ];
module.exports = { presets };
执行转换脚本的命令,针对文件夹的命令,也可以针对单个文件进行转换。./node_modules/.bin/babel src --out-dir lib
./node_modules/.bin/babel sample.js -o buildenv.js
可以在package.json中进行执行脚本的配置:
7版本中,presets中没有类似于es2015的设置了,在7版本中,应该是设置@babel/preset-env,参加下列的英文说明:@babel/preset-es2015@7.0.0-beta.53: ???? We've deprecated any official yearly presets in 6.x in favor or babel-preset-env. For 7.x it would be @babel/preset-env.
在JavaScript开发时,我们就能够使用新的ECMAScirpt语法,之后使用Babel将代码转换成兼容浏览器的方式。 感谢各位的阅读,以上就是“Babel7的安装和配置方法”的内容了,经过本文的学习后,相信大家对Babel7的安装和配置方法这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是天达云,小编将为大家推送更多相关知识点的文章,欢迎关注!