es6转换为es5的插件babel的安装与使用

首先你需要有npm或者cnpm或者yarn这三种任意一种包管理器,本安装使用基于Visual Studio Code

表示在vscode的终端运行,在打开,如果在终端输入命令后报错,可能是node没有安装和配置,可以再网上随便搜就有,配置后需要重启电脑,如果以上都有,那么如下操作:

0. 如果输入babel --version没有出现版本号，需要执行以下代码

   cnpm install -g babel-cli

1. 新建app01文件夹

2. 进入到app01文件夹中，将当前文件夹初始化为nodejs项目

   npm init 或者
   npm init -y
   经过一系列的操作之后，最终会创建出一个package.json文件，该文件保存了整个项目的配置信息

3. 新建src文件夹，在src文件夹下新建a.js，在a.js文件中编写ES6代码
   let a = 1;
   let test = () => {}

4. 安装babel

   cnpm install --save-dev babel-cli 或
   cnpm install --save babel-cli
   –save-dev表示生产依赖，仅在项目开发时使用的依赖
   –save表示产品依赖，在产品上线时也会使用的依赖

5. 安装babel预设【转换规则】

   cnpm install --save-dev babel-preset-latest

6. 在项目的根目录下新建并配置.babelrc文件,注意有"."
   {
   “presets”:[“latest”]
   }

7. 使用babel将ES6代码转换为ES5代码
   在src路径
   > babel a.js
   在app01路径
   > babel src/a.js

   拓展：

   1. 只是单个文件的话 将a.js转换为ES5的代码之后生成一个b.js文件

      babel a.js --out-file b.js

   2. 如果多个文件时,直接把它的父文件夹转换: 将src文件夹转换为ES5的代码之生成一个dist文件夹

      babel src --out-dir dist

   3. 可以在package.json文件中进行配置
      “scripts”: {
      “build”:“babel src --out-dir dist”,
      },
      之后每次在项目的根目录下执行npm run build，就可以将src进行转换然后署出dist文件夹