环境配置

  2 分钟阅读  

环境配置

前置环境配置

在继续下面的环境配置之前，本文档默认了你已经安装了高于 v12 的 node，并且可以使用 npm install。

如果安装 Node.js 或者 npm 遇到困难，可以参考 Node.js 的引导文档。

使用 yarn 代替 npm

这是一个可选项，在实际工程之中两者并没有本质上的差别。与常用的 npm 相比，yarn 大多情况下具有更快的下载速度和更为清晰的命令行输出。所以我们更加推荐使用 yarn。

这里不具体叙述安装过程，可以参考 官网 上给出的方式进行安装，也可以使用 npm install yarn -g 命令安装（后者可能不适用于 Linux 用户）。

yarn 的命令和 npm 的命令大致具有以下对应关系，更细节的关系则可以参考 npm 的引导文档：

npmyarn
安装指定第三方库npm install react --saveyarn add react
移除指定第三方库npm uninstall react --saveyarn remove react
开发模式下安装npm install react --save-devyarn add react --dev

安装 TypeScript

TypeScript 是 JavaScript 的超集。简而言之，TypeScript 就是带有类型系统的 JavaScript。TypeScript 代码可以直接被编译为 JavaScript 代码并执行。

安装 TypeScript 是简单的：

# yarn
yarn global add typescript

# npm
npm install -g typescript

安装后可以在某一目录下新建 hello.ts 文件，输入以下代码：

let a: string = "Hello world!";
console.log(a);

并在这个目录下执行：

tsc hello.ts

如果安装顺利，这个目录下应当会出现编译生成的 hello.js 文件，使用命令 node hello.js 应当就可以看到命令行输出的问候语。

安装 React 框架 & 创建 React 应用

React 框架的安装可以通过脚手架 create-react-app 完成，一般而言安装框架这一过程可以集成在创建应用的过程中完成。

进入到你想要创建应用的目录下，执行以下命令：

# npm 5.2+
npm install create-react-app -g
npx create-react-app <app-path> --template typescript

# yarn 0.25+
yarn global add create-react-app
yarn create react-app <app-path> --template typescript

这里 <app-path> 是你的应用的目录的路径。这些命令会创建一个使用 TypeScript 开发的 React 应用，并安装 React 框架。

如果安装顺利，使用命令：

# npm
npm run start

# yarn
yarn start

即可编译整个应用，随后应当就可以通过本地 3000 端口访问到 React 的欢迎界面了。

代码格式化

这是一个可选项，但是我们认为开发较大工程的时候，尤其是需要多人协作的时候，统一的码风是必要的。

即使每个人都可以有自己习惯的编写风格，但为了其他人阅读方便，在提交代码之前应该使用代码格式化工具统一码风。这里简单介绍两种常用的格式化工具。

ESLint

在应用目录下执行下列命令，即可初步配置一个 ESLint：

# npm
npm install eslint --save-dev
./node_modules/.bin/eslint --init

# yarn
yarn add eslint --dev
yarn eslint --init

执行第二条命令后，ESLint 会询问你的配置。对于前几个问题我们建议选择“强制调整码风” “使用 JavaScript modules(import/export) ” “使用 React 框架” “使用 TypeScript ” “在浏览器上运行代码”。

后续则是对具体码风规则的配置，你可以回答具体问题或选择使用模板，也可以暂且不回答而选择后续手动配置 .eslintrc 文件中的码风规则。

下面我们希望能够一键调整码风，比如说终端执行 yarn fix 就可以修复所有源代码的码风。现在打开 package.json 文件，可以注意到这样的一段：

"scripts": {
  "start": "react-scripts start",
  "build": "react-scripts build",
  "test": "react-scripts test",
  "eject": "react-scripts eject"
}

在最后添加一行：

"scripts": {
  ...
  "fix": "./node_modules/.bin/eslint src --ext .js,.jsx,.ts,.tsx --fix"
}

这一行的意思是执行 yarn fix 的时候会使用 ESLint 将 src 目录下的所有扩展名为 js / jsx / ts / tsx 的文件修复码风。

不过要注意的是，自动修复能力有限，所以更多的时候还需要手动对文件进行一些调整。自动修复也有可能会出错，这个时候可以自己手动添加让 ESLint 忽略这一部分的注释。

Prettier

在 Node.js 项目中添加 Prettier：

yarn add -D prettier

在 package.json 中添加：

{
    "scripts": {
        ...
        "fix": "prettier --write 'src/**/*{.js,.jsx,.ts,.tsx}'"
    }
}

这里的含义与 ESLint 相似，只不过这次是由 Prettier 尝试修复码风。