BabelJS - 使用Babel 7进行项目设置

最新版本的Babel，7随着现有软件包的更改而发布。安装部分保持与Babel 6相同.Babel 7的唯一区别是所有包都需要安装 @babel / ，例如@ babel / core，@ babel / preset-env，@ babel / cli，@ babel / polyfill等。

这是使用babel 7创建的项目设置。

Command

执行以下命令启动项目设置−

 
 npm init 

安装以下软件包

 
 npm install --save-dev @ babel / core 
 npm install --save-dev @ babel / cli 
 npm install --save-dev @ babel / preset-env 

这是package.json创建&减去;

现在将创建一个根文件夹中的 .babelrc 文件−

创建一个文件夹 src / 并向其添加文件 main.js 并编写代码以转换为es5。

src / main.js

 
 let add =（a，b）=> {
返回a + b; 
} 

命令转换

 
 npx babel src /main.js --out-file main_es5.js 

main_es5.js

 
"use strict"; 
 var add = function add（a，b）{
 return a + b; 
}; 

Babel 7的工作与Babel 6相同。唯一的区别是使用@babel进行pacakge安装。

在babel 7中有一些不推荐使用的预设。列表如下−

• ES20xx预设
• babel-preset-env
• babel-preset-latest
• Babel中的舞台预设

此外，包中的年份已删除 - @ babel / plugin-transform-es2015-classes 现在 @ babel / plugin-transform-classes

我们将看到另一个使用typescript的示例，并使用typescript预设和babel 7将其转换为Es2015 JavaScript。

要使用typescript，我们需要安装typescript包，如下所示−

 
 npm install --save-dev @ babel / preset-typescript 

在 src / 文件夹中创建 test.ts 文件，并以打字稿形式写下代码−

test.ts

 
 let getName =（person:string）=> {
返回"你好"，+人; 
} 
 getName（"Siya"）; 

.babelrc

命令

 
 npx babel src / test.ts --out-file test.js 

test.js

 
"use strict"; 
 var getName = function getName（person）{
 return"Hello，"+ person; 
}; 
 getName（"Siya"）;