babel环境安装及简单使用步骤

Babel 是一个 JavaScript 编译器   https://www.babeljs.cn/

1. babel是基于nodeJS的，先安装nodeJS，安装步骤自行百度，傻瓜式安装

2. 新建一个项目目录，进入项目目录并初始化

 npm init -y

3. 通过以下命令本地安装babel cli　（命令行工具）

npm install --save-dev babel-cli         (--save是项目内安装,不是全局安装  -dev是开发时环境，开发时需要依赖，正式上线时不需要依赖的)
npm i -D babel-cli                       ( 简写方式，效果同上 ）

4.进入项目目录，根目录新建entry.js，并打开package.json，添加 "build":"babel entry.js" , 这样执行npm run build 就可以编译entry.js文件的。

{
  "name": "project",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build":"babel entry.js"    //插入此行代码
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-cli": "^6.26.0"
  }
}

5. 制定转换规则，需要另外一个包，安装 babel-preset-env

npm i -D babel-preset-env

6. 根目录新建 .babelrc 文件 ，env是我们安装的插件，targets里是配置的兼容到浏览器的最新版本。

{

    "presets": [

        [

            "env",

            {

                "targets": {

                    "browsers": [ "last 1 version" ]

                }

            }

        ]

    ]

}

7. 执行npm run build 在命令行就可以看到编译后的结果，需要将编译后的结果存储到一个文件中，在package.json修改build命令,执行build命令就会有一个index.js文件了。

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "babel entry.js -o index.js"
  },

8. 每次手动编译比较麻烦，还可以在命令后添加 -w 自动编译，在执行npm run build，程序会挂起自动监听文件是否发生改变。

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "babel entry.js -o index.js -w"                    -w  就是watch的意思
  },

9.ES6部分语法可能在编译的时候会报错，可以安装另外一个插件

npm i -D babel-plugin-transform-class-properties        //babel插件 转换 类 属性 ... 命令太长方便记忆

10. 安装这个插件后，要记得在 .babelrc文件里添加配置，否则没用

{
    "presets": [
        [
            "env",
            {
                "targets": {
                    "browsers": [ "last 1 version" ]
                }
            }
        ]
    ],
    "plugins":["transform-class-properties"]
}

 

这些大致就是babel的简单使用，后续继续补充......