导航：首页 > 互联网科技 >

Babel7的安装和配置方法

发表于：2026-11-03 作者：千家信息网编辑

千家信息网最后更新 2026年11月03日，这篇文章主要讲解了"Babel7的安装和配置方法"，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习"Babel7的安装和配置方法"吧！Babel是一个Jav

千家信息网最后更新 2026年11月03日Babel7的安装和配置方法

这篇文章主要讲解了"Babel7的安装和配置方法"，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习"Babel7的安装和配置方法"吧！

从7版本，Babel的安装和之前是有区别的，这在安装的时候，要注意写对包名。

7的安装方式：

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 i

t would be @babel/preset-env.

在JavaScript开发时，我们就能够使用新的ECMAScirpt语法，之后使用Babel将代码转换成兼容浏览器的方式。

感谢各位的阅读，以上就是"Babel7的安装和配置方法"的内容了，经过本文的学习后，相信大家对Babel7的安装和配置方法这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是，小编将为大家推送更多相关知识点的文章，欢迎关注！

千家信息网