在正式开发之前，我们先来搭建开发环境：一个合理的开发环境，会大大提高我们写代码的效率，规范性和健壮程度。

我们将会从初始化环境开始，然后从检查（Lint） 、测试（Test） 、构建（Build） 、版本管理（Version Control） 和 持续化集成（Continuous integration） 这几方面来搭建我们的开发环境。

那么首先我们来初始化我们的环境。

# 初始化环境

首先在任意位置新建一个名叫 sparrow 的文件夹，然后安装下面对应版本的 node 和 npm：

node: 14.17.6
npm: 6.14.15

接下来运行 npm init -y 来初始化环境，这之后 sparrow 文件夹里会出现一个 package.json 文件。又了它之后，我们就来搭建我们的开发环境！

代码编辑器推荐使用 VSCode

# 代码检查（Lint）

首先我们来看看代码检查，代码检查是一种静态的分析，常用于寻找有问题的模式或者代码，能帮助我们规范代码和加少出错的可能性。这里我们将使用 ESlint 来作为代码检查的工具。

$ npm install eslint --save-dev

@前端进阶之旅: 代码已经复制到剪贴板

我们可以通过下面的命令来初始化 ESlint 的配置，它会问你一些问题，根据你的选择去生成对应的配置文件。

$ npx eslint --init

@前端进阶之旅: 代码已经复制到剪贴板

这里把问题和答案都记录下来了。

How would you like to use ESLint? > To check syntax, find problems, and enforce code style
What type of modules does your project use? > JavaScript modules (import/export)
Which framework does your project use? > None of these
Does your project use TypeScript? > NO
Where does your code run? > Browser, Node
How would you like to define a style for your project > Use a popular style guide
Which style guide do you want to follow? > Airbnb: github.com/airbnb/java…
What format do you want your config file to be in? > JavaScript
Would you like to install them now with npm? > Yes

最后对生成的配置文件进行简单修改后如下：

module.exports = {
  env: {
    browser: true,
    es2021: true,
    node: true,
    // 这里增加一行，用于支持后面的测试环境
    jest: true,
  },
  extends: ["airbnb-base"],
  parserOptions: {
    ecmaVersion: 13,
    sourceType: "module",
  },
  rules: {
    // 这里添加一行规则把这条规则隐藏
    "import/prefer-default-export": 0,
  },
};

@前端进阶之旅: 代码已经复制到剪贴板

因为我们需要使用 airbnb 的规则集合，所以需要额外安装下面的包：

$ npm install eslint-plugin-import eslint-config-airbnb-base@latest --save-dev

@前端进阶之旅: 代码已经复制到剪贴板

为了验证 eslint 已经正确使用了，我们在项目的根目录下增加：src/index.js 和 src/drawRedRect.js，并且输入以下的代码：

// src/index.js

export { drawRedRect } from './drawRedRect';
// src/drawRedRect.js

export function drawRedRect(svg) {
  var rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect')
  rect.setAttribute('x', 0)
  rect.setAttribute('y', 0)
  rect.setAttribute('fill', 'red')
  rect.setAttribute('width', 100)
  rect.setAttribute('height', 100)
  svg.appendChild(rect)
}

@前端进阶之旅: 代码已经复制到剪贴板

在控制台输入命令：npx eslint src/drawRedRect.js 会去检测 src/drawRedRect.js 文件存在的规则问题，如果加上 --fix 选项会修复在规则列表有黄色 🔧 标记的规则。这里我们输入 npx eslint src/drawRedRect.js --fix，这个时候打开 src/drawRedRect，会发现 var 被修复成了 const，并且每一条语句末尾都被添加上了 ;。

// src/drawRedRect.js

export function drawRedRect(svg) {
  const rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
  rect.setAttribute('x', 0);
  rect.setAttribute('y', 0);
  rect.setAttribute('fill', 'red');
  rect.setAttribute('width', 100);
  rect.setAttribute('height', 100);
  svg.appendChild(rect);
}

@前端进阶之旅: 代码已经复制到剪贴板

这之后我们给 package.json 增加 lint 命令如下：

{
  "scripts": {
    "lint": "eslint --fix"
  }
}

@前端进阶之旅: 代码已经复制到剪贴板

为了更好的开发体验，如果使用 VSCode 话可以安装 eslint 插件（直接在应用商店搜索即可）。一方面插件会直接在文件中把问题高亮出来，另一方面我们可以通过命令来直接修复问题：cmd + p + > ESlint: Fix all auto-fixable Problems。更多 ESlint 相关的东西可以去官网学习。

# 代码测试（Test）

代码检测之后就是代码测试了，优秀的单元测试能保证我们的项目在迭代的过程中不出问题，这里我们将使用 Jest 和 Jest Electron 来搭建我们的测试环境。

Jest 是一个流行的 JavaScript 的测试框架，一般都运行在 node 或者模拟出来的浏览器环境，但是因为我们开发的是一个图表库，真实的浏览器环境会更加易于我们调试，所以我们需要 Jest Electron。我们用如下命令安装，这里需要注意的是一定要安装下面版本的 Jest，否者会出问题。

$ npm i jest@26.0.1 jest-electron --save-dev

@前端进阶之旅: 代码已经复制到剪贴板

然后增加一个名叫 jest.config.js 并且增加内容如下：

module.exports = {
  testMatch: ['**/__tests__/**/*.spec.js'], // 只测试后缀为 .spec.js 的文件
  runner: 'jest-electron/runner', // 指定测试的 runner
  testEnvironment: 'jest-electron/environment', //  制定测试的环境
};

@前端进阶之旅: 代码已经复制到剪贴板

在真正开始测试之前我们还需要将代码编译成可以在 node 环境下面可以运行的代码，这个时候我们就需要 Babel 了。Babel 是一个 JavaScript 编译器，主要用于在当前和旧的浏览器或环境中，将 ECMAScript 2015+ 代码转换为 JavaScript 向后兼容版本的代码。

$ npm install --save-dev @babel/core @babel/cli @babel/preset-env

@前端进阶之旅: 代码已经复制到剪贴板

然后增加一个名叫 .babelrc 的文件并且输入以下内容：

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "useBuiltIns": "entry",
        "corejs": "3.6.4"
      }
    ]
  ],
  "exclude": "node_modules/**"
}

@前端进阶之旅: 代码已经复制到剪贴板

这个时候我们在根目录下增加 __tests__ 文件夹，并且增加 index.spec.js 和 utils.js 文件:

// __tests__/index.spec.js

import { drawRedRect } from '../src';

describe('test', () => {
  test('drawRedRect()', () => {
    const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
    svg.setAttribute('width', 400);
    svg.setAttribute('height', 400);
    svg.setAttribute('viewBox', [0, 0, 400, 400]);
    document.body.appendChild(svg);

    drawRedRect(svg);
    expect(svg.getElementsByTagName('rect').length).toBe(1);
  });

});
// __tests__/utils.js

export function createDiv() {
  const div = document.createElement('div');
  document.body.appendChild(div);
  return div;
}

@前端进阶之旅: 代码已经复制到剪贴板

如果一切顺利的话我们运行：npx jest 和普通的测试测试没有太多的区别，但是 DEBUG_MODE=1 npx jest 会额外打开一个基于 Electron 真实的浏览器，并且输出如下：

为了兼容 Windows 和 Mac 系统，我们需要额外安装一个 cross-env 这个库。

$ npm install --save-dev cross-env

@前端进阶之旅: 代码已经复制到剪贴板

这样需要打开 Electron 测试的时候输入：cross-env DEBUG_MODE=1 npx jest。

这个过程中 Jest 会首先读取 .babelrc 的内容，用 Babel 将代码编译之后再测试。之后我们给 package.json 增加 test 和 test-live 命令如下：

{
  "scripts": {
    "test": "jest --coverage",
    "test-live":"cross-env DEBUG_MODE=1 jest --coverage",
  }
}

# 初始化环境

# 代码检查（Lint）

# 代码测试（Test）

# 代码构建（Build）

# 版本管理（VC）

# 总结

实战 搭建开发环境|可视化专题

实战 搭建开发环境|可视化专题

实战搭建开发环境|可视化专题

实战搭建开发环境|可视化专题