之前写React项目一直用Create React App直接搭建开发环境。这一次造轮子项目打算从零开始搭建环境。下面的内容就是搭建过程。

GitHub新建一个repo

创建时勾选“添加readme文件”，license选择MIT。创建完毕后，将项目clone到本地对应的项目文件夹里，cd到当前文件夹后命令行输入git clone git@xxxxx .

初始化npm

项目终端打开命令行输入npm init -y，项目文件夹目录里会多出一个"package.json"文件。
之后就可以进行第一次提交了。

安装webpack

将webpack安装到开发者的依赖里面：yarn add webpack webpack-cli --dev
安装完成后会发现"package.json"文件里面多出一部分内容

为了确保版本跟学习项目的版本一致，重新安装webpack并指定版本：yarn add webpack@4.29.6 webpack-cli@3.2.3 --dev

新建lib/index.tsx

创建一个文件夹'lib'，该文件夹下创建'index.tsx'，该文件就是未来项目程序的主入口。
之后在项目根目录下创建'webpack.config.js'文件，进行webpack配置。你的目录结构应该如下图所示

webpack配置文件的格式很简单，结构如下图所示：

这样基本上就可以运行tsx脚本了。再安装typescript：yarn add typescript --dev 以及awesome-typescript-loader: yarn add awesome-typescript-loader --dev

注意！目前awesome-typescript-loader已停止维护，请使用ts-loader

配置库格式

在webpack.config.js文件里配置输出路径：

使用webpack

命令行输入npx webpack,终端输出一个warning：

是webpack配置文件没有设置mode，只需在webpack.config.js配置模式：添加mode: 'development'。之后运行命令npx webpack即可成功使用webpack。
编译成功后，可以发现目录结构里多出了很多文件，特别是生成出来的/dist/lib目录下的steveUI.js的文件

里面的内容就是在“生产模式”下用webpack转译出来的我们的index.tsx文件（程序主入口）里的内容。

创建两个配置文件

tsconfig.json
tslint.json 其实可以不用加，因为这两个文件都是为使用webpack服务的。如果根据上述步骤能够使用webpack，就可以忽略这个步骤。

题外话：什么时候加`--dev`

安装package的时候通常会在命令结尾加上--dev，这个命令决定该package的使用只面向程序员，不面向用户。如果在安装时不声明--dev或其他命令，通常默认会加上--save（缩写是-S, --dev的缩写是-D）。下面是常用的安装命令

npm install --dev                // 面向用户和开发者
npm install --save-dev           // 只面向开发者
npm install -S
npm install -D
yarn add                         // yarn没有save命令
yarn add --dev

自动使用webpack进行转译/打包

每次写好脚本，就需要输入转译命令（npx webpack）进行转译，这样就很麻烦。我们直接让它自动化。

安装webpack-dev-server:yarn add webpack-dev-server --dev。
运行npx webpack-dev-server, 转译成功后输出会提供8080端口，按住ctrl点击。
url地址后加/steveUI.js即可看到页面。之后每次修改代码，保存之后，网页就会自动渲染。

总结一下

webpack负责把tsx文件转译为js文件。
webpack-dev-server则是提供一个server，默认端口号是8080，server会监听entry主程序index.tsx，将其转译为js内容的字符串存入到内存，当用户跳转到output主程序steveUI.js后，server会将内存里的js内容的字符串展示到当前页面，之后进行动态更新。

使用HtmlWebpackPlugin

因为当前目录里只有js文件，没有呈现的入口，需要html文件，所以目前为止还不能开始写代码。
生成html入口步骤如下：

安装HtmlWebpackPlugin：yarn add HtmlWebpackPlugin --dev
webpack.config.js文件更新：const HtmlWebpackPlugin = require("html-webpack-plugin");
webpack.config.js文件更新：

module.exports['plugins'] = [
    new HtmlWebpackPlugin({
      title: "steveUI",               // 设置html文件的title
      template: "index.html",         // 指定模板文件为index.html
    }),
  ]

创建index.html文件，内容如下：

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

之后就可以开始写代码了。如果不能实时更新，就请关闭vscode的safe write（不过新版IDE已经默认关闭了）

汇入到yarn命令

打开package.json文件，添加如下两行：

之后在命令行输入yarn build就可以自动调用webpack进行打包；输入yarn start就可以进入开发模式。

安装React

安装React及其依赖：yarn add react react-dom
这里不需要加--dev，因为用户使用React应用时也需要安装React。

安装React声明文件

安装React后依然不能使用，报错如下：

原来是没有安装声明文件，安装：

yarn add @types/react --dev
yarn add @types/react-dom --dev

题外话：什么是yarn.lock文件

这是yarn的锁定文件，锁定的是所有依赖的版本号。yarn install命令就会根据这个文件里的内容安装相应的依赖。

添加文件支持

webpack.config.js文件插入如下代码：

写代码时就支持引入带这几个后缀的文件。

加入外部扩展(Externals)

生产模式下执行yarn start可能会出现影响性能的警告，为消除这个警告，需要在webpack.config.js加入外部扩展——externals。

这样写就会防止将import的包打包到bundle中，而是在运行时，从外部获取这些扩展依赖。

指定开发和生产模式并兼容Linux

改动太多直接上链接：指定开发和生产模式并兼容Linux · ViktorVan22/steveUI@a6b9735 (github.com) 需要注意的是要安装cross-env: yarn add cross-env --dev

配置TS类型声明文件

"d.ts"后缀的文件就是声明".tsx"文件里的类型，放在lib文件下看着很碍事，索性移动到dist目录下。改动链接：d.ts后缀文件移动到dist目录里了 · ViktorVan22/steveUI@c4c…

配置单元测试

非常的head scratching，直接上链接：

引入svg图像

开始尝试制作Icon组件，关键的一步是能够正常显示svg图像，改动细节看这里：Icon组件支持引入svg图像 · ViktorVan22/steveUI@6f17b1d (github.com) 总结一下步骤：

webpack配置文件里添加loader：svg-sprite-loader以及test的正则表达式
安装:yarn add --dev svg-sprite-loader
ts配置文件里添加源文件路径
创建一个内容为svg格式文件的声明类型文件，这里定义为./types/custom.d.ts
使用<svg>和<use>标签使用svg文件这样就初步完成了svg图像支持，后续可以使用动态加载svg方法，简化Icon组件的API。

配置SCSS

node-sass was deprecated, 现在直接yarn add --dev sass

总结

从零搭建一个React开发环境，不借助CRA脚手架，会是一个非常琐碎繁杂的工作，但也相当锻炼人。是个不错的start。

React造轮子项目工程搭建经历