【手把手撸一个脚手架】第二步, 搭建开发环境

通过上一步的配置我们已经能够让编辑器识别出我们代码中不规范的地方, 但是还不够. 既然编辑器能够识别出错误, 它要是还能修正错误岂不是爽死

• 第一步, 打开 vscode 配置文件 command + ,

• 第二步, 在功能搜索框中输入 autofix

• 第三步, 按照如下图所示的方式配置.

  

至此, 我们的编辑器已经可以自动修复 eslint 中发现的 代码规范 相关的一些错误啦, 就像下边酱紫.

删除封号以后, 保存编辑器自动把封号给我们加上啦, 开发体验 666, 爽到飞起 ^_^

ps: 至此, vscode 配置自动修复功能完成, 告诉你个秘密, vue react 都可以自动修复的哟, 有兴趣的小伙伴请评论区交流~

兼容 es6

现代的前端开发人员, es6 已经成为了刚需, 然鹅, node 对 es6 并没有完全兼容(到目前为止), 为了全方位使用最新的语法. 我们引入 babel

首先, 安装依赖

npm i @babel/core@7.1.6 babel-core@^6.26.3 babel-plugin-transform-es2015-modules-commonjs@6.26.2 babel-polyfill@6.26.0 babel-preset-env@1.7.0 babel-preset-latest-node@2.0.2 babel-register@6.26.0 -S
复制代码

在项目的根目录中添加 .babelrc 在该文件中粘贴以下内容

{
    "presets": ["env"],
    "plugins": ["transform-es2015-modules-commonjs"]
}
复制代码

创建入口文件 index.js 并粘贴以下内容

require('babel-register');
const babel = require('@babel/core');
const babelPresetLatestNode = require('babel-preset-latest-node');

babel.transform('code();', {
  presets: [[babelPresetLatestNode, {
    target: 'current',
  }]],
});

require('babel-polyfill');
require('./src');
复制代码

创建 src 目录, 并添加 index.js a.js 文件, 文件内容如下

// index.js
import a from './a';
a.a();

// a.js
export default {
  a() {
    console.log('12345');
  },
};
复制代码

此时执行 node index.js 顺利打印出 12345

最后改造 bin/learn.js 内容如下:

#!/usr/bin/env node
require('../'); // 执行入口文件
复制代码

此时在命令行中执行 learn

兼容 es6 成功

到目前为止, 我们的开发环境搭建完成. 撒花庆祝 ^_^

下级预告: 下一节, 我们将会对接 gayhub 公共 api 获取项目信息, 有兴趣的小伙伴可以提前预习一哈, 大家玩儿的开心 :smile: