使用babel搭建es6开发环境

这一篇 tutorial 是紧接着之前如何配置本地 JavaScript 开发环境的：

如何配置本地 JavaScript 开发环境

在我们搭建好本地 Javascript 开发环境后，我们会发现如果使用诸如 import/export 等关键字，我们的程序会显示错误。这是因为 node.js 使用 CommonJs 的模块系统，而 es6 则是使用其自己的一套模块系统。

这个时候，我们需要使用 babel 来将 es6 或以上版本的 javascript 转换为 node.js 上可以运行的版本。

Babel · The compiler for next generation JavaScript

首先，我们需要安装一些 babel 的 package。安装这些 package 到 devDependencies，因为 tutorial 中我们的项目不需要 import 这些 package。

yarn add -D @babel/core @babel/node @babel/preset-env

@babel/core: babel 的核心模块，用于解析 javascript 代码

@babel/node: 在本地开发环境中，我们可以使用 babel-node 来替代 node 的 cli 去运行我们的 javascript

@babel/preset-env: 默认使用 babel-preset-latest 即最新支持的 javascript 版本

@babel/preset-env takes any target environments you’ve specified and checks them against its mappings to compile a list of plugins and passes it to Babel.

然后，我们在项目目录中添加 .babelrc 文件，用来配置 babel。

.babelrc

{
  presets: ["@babel/preset-env"]
}

最后，修改我们 package.json 中的 scripts，让其使用 babel-node 执行 javascript 代码。

{
  "name": "zzax-web131",
  "version": "1.0.0",
  "description": "",
  "scripts": {
    "test": "babel-node ./index.js"
  },
  "devDependencies": {
    "@babel/core": "^7.2.0",
    "@babel/node": "^7.2.0",
    "@babel/preset-env": "^7.2.0"
  }
}

此时，运行如果我们安装一个 axios 的 package 并 import 到 index.js 中，我们就可以通过 yarn run test 就来运行程序了。

yarn add axios

index.js

import * as Axios from "axios";
console.log("hello");
console.log(Axios.get);

PS: 欢迎大家关注我们的微信号，里面会有更多资料，以及还可以直接联系到我们呀。