【React UI环境搭建】Webpack 4
-
整个项目只用ts，不用js；
-
推荐用yarn，尽量不用npm；
-
把yarn设置下淘宝源，下载会快很多，
yarn config set registry https://registry.npm.taobao.org； -
/dist/*dist下的所有文件都是不提上去的，要写到.gitignore里； -
有一个比较疑惑的点，每次新安装依赖，再
npx webpack-dev-server的时候，都要报错“Cannot find module 'webpack-cli/bin/config-yargs'”，是因为webpack-cli版本号需要是@3.x.x的，但是此时webpack-cli是@3.x.x啊，所以只能先移除再安装一下！！！就能正常开启服务了； -
yarn.lock文件是干什么用的？ 答：1. yarn.lock是yarn.lock文件；2. 它锁住了所安装依赖的版本号；
步骤
1、创建目录和远程仓库
- 创建图上三个文件；
-
再git clone这个仓库；
image.png
2、npm 初始化
- npm init -y， -y就是在init的时候省去了敲回车的步骤，生成的默认的package.json；
3、安装webpack（去官网看如何安装）
- 目前webpack已经到5了，所以安装的时候我们要把版本号带上，和课程中保持一致；
yarn add webpack@4.29.6 webpack-cli@3.2.3 --save-dev
4、新建lib/index.tsx
- 因为我们写的是一个库，库文件都写在lib目录下；
- 但是这时webpack还不知道该怎么去编译tsx文件；所以下面我们就添加一个webpack.config.js来配置webpack；
5、新建webpack.config.js
①配置entry
②配置output
③配置module.rules
a. 安装awesome-typescript-loader来编译ts（yarn add awesome-typescript-loader --dev）
④配置plugins
6、配置 tsconfig.json 和 tslint.json
- tsconfig.json 和 tslint.json的内容可以直接抄别人的；
- 此时已经可以打包，把index.tsx变成index.js了！！！（运行
npx webpack）
7、配置webpack-dev-server（yarn add webpack-dev-server --dev）
- 因为虽然可以把index.tsx打包成index.js，但是我们不可能改动一下就
npx webpack一下啊，需要它可以自动编译，所以就需要安装webpack-dev-server了； - webpack是把index.tsx变成index.js，从文件变成文件；
- webpack-dev-server，则是开一个server，监听8080端口，同时把index.tsx变成index.js，且把index.js以字符串的形式存在内存里；放内存里的原因是这样会更快；
8、配置html-webpack-plugin（yarn add html-webpack-plugin --dev）
- 如果我们把webpack.config.js中entry的文件名改成其他的，例如
entry: { dd: '.....'}（dd就是定义的入口名字），那index.html中js的引入我们要重新再改写一次吗？ - 当然不是！！！index.html中那句引入语句我们就不写，安装html-webpack-plugin插件，它会自动填入js引入；
- 这时，再运行
npx webpack-dev-server，就会显示出index.html了，且自动把index.js引入了； -
下图中，把index.js的输出名字改成了win，在webpack.config.js中改；
image.png
image.png
9、定义一下快捷命令
- 就可以直接
yarn start、yarn build；
image.png
10、安装react和react-dom
-
yarn add react react-dom，不用加--dev，因为用户也需要用到它们，注意版本号； - 这时报错
Could not find a declaration file for module 'react'，是因为ts项目中除了要安装react、react-dom，还需要安装它们的类型声明文件，yarn add @types/react、@types/react-dom --dev； - ！！！这里一定要注意，它们的版本号，如果后面有bug了，一定记得查看是否是版本号的问题！！！
- 这里一个很神奇的bug就是即使安装完@types/react和@types/react-dom，yarn start也是失败的。但是！！！做完下面一步，分别配置webpack文件，安装完依赖cross-env，再yarn start竟然成功了！！！
11、配置 webpack.config.prod.js和webpack.config.dev.js（具体内容看下面第4条）
12、移动index.d.tsx文件
image.png
13、配置单元测试
- react社区最流行的测试就是jest，文档：https://jestjs.io/zh-Hans/；
- jest不支持ts，所以我们需要安装ts-jest；
- jest.config.js需再配置一边webpack里的东西，因为jest不会去读取webpack里的东西；
①yarn add --dev jest@24.3.1 babel-jest@24.3.1 @babel/preset-env@7.3.4 @babel/preset-react@7.0.0 react-test-renderer@16.8.4；
②配置babel.config.js或者.babelrc（babel.config.js和.babelrc的区别是什么）；
③yarn add --dev ts-jest@24.0.0；
④package.json中，"test": "cross-env NODE_ENV=test jest --config=jest.config.js --runInBand",；
⑤配置jest.config.js文件；
⑥必须要创建test/setupTests.js文件，否则yarn test报错；
image.png
⑦
yarn add @types/jest@24.0.9 --dev⑧配置
tsconfig.test.json文件；⑨
yarn add --dev react-test-renderer@16.8.4 @types/react-test-renderer@16.8.1
-
最后出了这个报错，于是又安装了tslib，再yarn test就成功了（但是课程中没有这个报错）；
image.png
image.png
image.png
知识要点
1、npx xxx
- npx：先在当前目录下找此模块运行，找不到就到全局找，全局找不到就直接安装（但是它的安装位置不在node_modules下，所以最好不要用npx来自动下载安装）
2、组件文件里也要引入React！！！
-
时刻记住，你在return中写的
<div></div>不是标签！！！是JSX！！！
image.png
3、关于打包后的大小
- mode为production时，index.html文件有200多k，但这时会很有警告，因为生产环境下的文件有大小限制； mode为development时，index.html有1.2M，但没有警告，因为它看你是开发环境，所以允许你的体积大一些；
- 要想办法打包的时候不把react给打包进去，因为用户既然要用我这个UI库，那么他肯定是基于react的，他自己就会安装react；
-
于是就需要进行两步：
①mode为production；
②在webpack配置文件中，添加externals属性，它就告诉webpack，里面的库你不要给我打包进来； - 到这里又会有一个问题，难道每次要改来改去吗，开发的时候是development，部署的时候是production？
4、webpack.config.dev.js和webpack.config.prod.js
- webpack.config.dev.js是开发是用的；
- webpack.config.prod.js是打包时用的；
- webpack.config.js是webpack的共用配置；
- 最后在package.json中修改一下start和build使用的webpack文件；（cross-env是一个跨平台的库，保证你的变量在各个平台都能被理解；）
5、每个目录的作用
image.png
