【React UI环境搭建】Webpack 4

• 整个项目只用ts，不用js；

• 推荐用yarn，尽量不用npm；

• 把yarn设置下淘宝源，下载会快很多，yarn config set registry https://registry.npm.taobao.org；

• package.json中版本号前面~和^的区别

• /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