Étapes de construction : 1. Installez l'outil babel-cli avec la syntaxe "npm install --save-dev babel-cli" ; 2. Installez les dépendances avec la syntaxe "npm install --save-dev babel-preset-es2015 babel -cli" ; 3. Configurez le fichier ".babelrc" dans le répertoire racine et définissez les règles de transcodage ; 4. Modifiez l'élément d'exécution de la commande des scripts dans package.json.

L'environnement d'exploitation de ce tutoriel : système Windows 7, ECMAScript version 6, ordinateur Dell G3. Avantages de

es6 (hors sujet) :

es6 est ECMAScript2015. es6 est un sous-ensemble de js, mais le js dont nous parlons généralement est la version antérieure à es6. js lui-même est un langage très imparfait, mais es6 cache de nombreuses parties laides de js grâce au sucre syntaxique. Il fournit de nombreuses fonctionnalités, telles que le traitement des données javascript, les fonctions fléchées, l'affectation de déstructuration, les paramètres par défaut (paramètres par défaut), les classes (classes), les modules (modules), etc., y compris ces méthodes de requête asynchrone pour le front-end et le back-end. séparation, qui peut être très bonne Résoudre les problèmes rencontrés par les grands front-end.

Créer un environnement de développement pour es6 (conversion d'es6 en es5)

Si vous voulez bien faire votre travail, vous devez d'abord affiner vos outils, haha, la première étape consiste donc à créer un environnement de développement es6. Les navigateurs de version inférieure ne prennent pas en charge la syntaxe es6, ce qui nécessite la conversion de la syntaxe es6 en syntaxe es5 dans l'environnement d'exécution. Webpack a des capacités de compilation et de conversion automatiques dans vue. En plus de Webpack, babel peut être utilisé

Règles d'utilisation de Babel

. Babel est un transcodeur largement utilisé qui peut convertir le code ES6 en code ES5 afin qu'il puisse être exécuté dans l'environnement existant.

Cela signifie que vous pouvez désormais écrire des programmes dans ES6 sans vous soucier de savoir si votre environnement existant le prend en charge. Ci-dessous un exemple.

// 转码前
input.map(item => item + 1);

// 转码后
input.map(function (item) {
  return item + 1;
});
//上面的原始代码用了箭头函数，这个特性还没有得到广泛支持，Babel将其转为普通函数，就能在现有的JavaScript环境执行了。

1. Installez babelbabel

Babel提供babel-cli工具，用于命令行转码。

它的安装命令如下：

//需要先安装babel-cli
npm install --global babel-cli

2.配置文件.babelrc

Babel的配置文件是.babelrc，存放在项目的根目录下。使用Babel的第一步，就是配置这个文件。

该文件用来设置转码规则和插件，基本格式如下。

{
  "presets": [],
  "plugins": []
}

presets字段设定转码规则，官方提供以下的规则集，你可以根据需要安装。

# ES2015转码规则
npm install --save-dev babel-preset-es2015

# ES7不同阶段语法提案的转码规则（共有4个阶段），选装一个
npm install --save-dev babel-preset-stage-0
npm install --save-dev babel-preset-stage-1
npm install --save-dev babel-preset-stage-2
npm install --save-dev babel-preset-stage-3

然后，将这些规则加入.babelrc。

//例如：按需求添加
{
    "presets": [
      	"es2015",
      	"stage-2"
    ],
	"plugins": []
}

3.用法

# 转码结果输出到标准输出
$ babel example.js

# 转码结果写入一个文件
# --out-file 或 -o 参数指定输出文件
$ babel example.js --out-file compiled.js
# 或者
$ babel example.js -o compiled.js

# 整个目录转码
# --out-dir 或 -d 参数指定输出目录
$ babel src --out-dir lib
# 或者
$ babel src -d lib

# -s 参数生成source map文件
$ babel src -d lib -s

上面代码是在全局环境下，进行Babel转码。这意味着，如果项目要运行，全局环境必须有Babel，也就是说项目产生了对环境的依赖。另一方面，这样做也无法支持不同项目使用不同版本的Babel。

一个解决办法是将babel-cli安装在项目之中。

# 安装
npm install --save-dev babel-cli

然后，改写package.json。

{
  // ...
  "devDependencies": {
    "babel-cli": "^6.0.0"
  },
  "scripts": {
    "build": "babel src -d lib"
  },
}

转码的时候，就执行下面的命令。

npm run build

看一万遍，不如自己真正实践一遍

第一步：（创建本地项目以及目录）

本地新建文件夹，重命名为es6test,用vscode代码编辑器打开，在文件夹下新建两个文件，分别是项目文件src，以及打包文件dist文件，在src文件夹下新建index.html文件，并列新建index.js文件，并将index.js文件引入index.html

第二步：（初始化项目，添加转码依赖包）

打开vscode终端 ctrl +~,在文件根目录下初始化项目：

npm init -y

会生成一个package.json文件, -y的目的是在初始化时配置默认值，后续在生成的文件中修改即可。

npm太慢,先安装个cnpm

npm install -g cnpm --registry=https://registry.npm.taobao.org

在终端全局安装babel-cli

cnpm install -g babel-cli

2. Fichier de configuration .babelrc

babel src/index.js -o dist/index.js

cnpm install --save-dev babel-preset-es2015 babel-cli

Ensuite, ajoutez ces règles à .babelrc.

cnpm run build

3. Utilisationrrreee

Ensuite, réécrivez package.json. rrreee

第四步：（package.json中修改scripts命令执行项）

第五步：（验收成果，哈哈！）

cnpm run build

你也可以在src/index.js中再写些es6的语法，测试下。

【相关推荐：javascript视频教程、编程视频】

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!