之前写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"文件里面多出一部分内容

新建lib/index.tsx

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

注意！目前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的文件

创建两个配置文件

1.tsconfig.json
2.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 
1
2
3
4
5
6

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

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

1.安装webpack-dev-server:yarn add webpack-dev-server --dev。
2.运行npx webpack-dev-server, 转译成功后输出会提供8080端口，按住ctrl点击。
3.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入口步骤如下：

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

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

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

 
1
2
3

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

汇入到yarn命令

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

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

安装React

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

安装React声明文件

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

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

1.yarn add @types/react --dev
2.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，直接上链接：

1.配置单元测试(failed) · ViktorVan22/steveUI@483b3e3 (github.com)
2.单元测试配置完毕 · ViktorVan22/steveUI@f9902e0 (github.com)

引入svg图像

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

1.webpack配置文件里添加loader：svg-sprite-loader以及test的正则表达式
2.安装:yarn add --dev svg-sprite-loader
3.ts配置文件里添加源文件路径
4.创建一个内容为svg格式文件的声明类型文件，这里定义为./types/custom.d.ts
5.使用和标签使用svg文件

这样就初步完成了svg图像支持，后续可以使用动态加载svg方法，简化Icon组件的API。

配置SCSS

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

总结

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