这一篇 tutorial 是紧接着之前如何配置本地 JavaScript 开发环境的:
在我们搭建好本地 Javascript 开发环境后,我们会发现如果使用诸如 import/export 等关键字,我们的程序会显示错误。这是因为 node.js 使用 CommonJs 的模块系统,而 es6 则是使用其自己的一套模块系统。
这个时候,我们需要使用 babel 来将 es6 或以上版本的 javascript 转换为 node.js 上可以运行的版本。
首先,我们需要安装一些 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: 欢迎大家关注我们的微信号,里面会有更多资料,以及还可以直接联系到我们呀。