babel 简单配置测试

Babel 是一个 JavaScript 编译器

Babel 是一个工具链，主要用于将 ECMAScript 2015+ 版本的代码转换为向后兼容的 JavaScript 语法，以便能够运行在当前和旧版本的浏览器或其他环境中。

https://www.babeljs.cn/docs/

1.安装nodejs

2.新建测试目录es

进入es目录命令行 npm init -y     初始化package.json

3. npm i -D babel-preset-env babel-cli

4.在es目录下新建.babelrc

内容

{

    "presets": ["env"]

}

 

5 配置package.json 加入红色部分代码

{

  "name": "es",

  "version": "1.0.0",

  "description": "",

  "main": "index.js",

  "scripts": {

    "test": "echo "Error: no test specified" && exit 1",

    "build":"babel src -d dist",

    "watch":"babel src -w -d dist"

  },

  "keywords": [],

  "author": "",

  "license": "ISC",

  "devDependencies": {

    "babel-cli": "^6.26.0",

    "babel-preset-env": "^1.7.0"

  }

}

 

说明:

"babel src -d dist" 文件夹下js转换

"babel src -w -d dist" 为文件夹文件监控,

 

6.在es目录建 src 和dist目录

在src文件夹下建index.js 测试箭头函数

const sum = (x, y) => x + y;

7.运行npm run build 

dist文件下生成 index.js

"use strict";

var sum = function sum(x, y) {

  return x + y;

};

在vscode 命令行下转换失败问题,用管理员启动vscode就可以了,

当运行 npm run watch 时,src目录下js变动,自动触发转换.

参考

https://www.imooc.com/qadetail/348066