1. 项目初始化
2. 提升开发体验
3. 整理项目和杂项
4. 项目打包
5. 团队规范
项目地址 https://GitHub.com/YDJ-FE/ts-react-webpack
目前集成
- react - 16.4.x
- react-router-dom - 4+
- mobx - 5+ https://GitHub.com/mobxjs/mobx
状态管理库
- typescript - 3.0.x
- webpack - 4.16.x
- ant design https://ant.design/index-cn
- https://GitHub.com/axios/axios
- https://GitHub.com/jamiebuilds/react-loadable
异步组件加载
@svgr/webpack https://GitHub.com/smooth-code/svgr
使 svg 可以以组件的方式引入
用于替代 CSS-loader 的 CSS module 功能, 并动态生成. SCSS 的. d.ts 文件
husky
pre-commit
需求分析
因为模板是为以后项目开发所准备的前奏工作, 所以在搭建之前我觉得首先需要先考虑以下几个方面:
开发体验
项目打包
团队规范 那么这一篇就先做个起手式, 先搭建一个简单的可以跑起来的架子
起手安装
前置安装 首先需要全局安装 typescript, 这里默认大家都已经安装了 node 以及 NPM NPM install -g typescript
首先新建文件夹并进入 mkdir ts-react && cd ts-react
然后进行初始化, 生成 package.JSON 和 tsconfig.JSON NPM init -y && tsc --init
安装开发工具 这里包含有 webpack4, webpack-cli, webpack-dev-server NPM install-D webpack webpack-cli webpack-dev-server
安装 react 相关 因为需要整合 ts, 而 react 原本的包是不包含验证包的, 所以这里也需要安装相关 ts 验证宝 NPM install -S react react-dom NPM install -D @types/react @types/react-dom
安装 ts-loader(或者 awesome-typescript-loader) 这两款 loader 用于将 ts 代码编译成 JS 代码, 用法上差异较小, 这里选择的是 awesome-typescript-loader NPM install -D awesome-typescript-loader
这个时候基本的安装步骤就完成了, 以后需要什么再陆续添加进去, 现在开始创建项目
项目启动
webpack 配置
在项目根目录新建一个 build 文件夹, 然后在里面新建 webpack.config.JS 文件: mkdir build && cd build && touch webpack.config.JS
根目录下新建 src 文件夹, 然后在 src 里新建 index.tsx 文件作为项目入口: mkdir src && cd src && touch index.tsx
编写简单的 webpack 配置, 只包含 entry 和 output:
编写 awesome-typescript-loader 配置项: 在 webpack 中的 module 是专门用来决定如何处理各种模块的配置项, 例如本例中的 typescript, 这里主要用的配置项就是 module.rules, 而当前只需要简单配置解析. tsx 文件类型即可
在 src/index.tsx 中写入口文件
但是这时候你会发现有一个错误没有处理
这是因为在 tsconfig 里面没有指定 JSX 的版本, 这时候在 tsconfig 的 compilerOptions 中添加 "jsx": "react" 配置项即可消除错误 此外还需要注意一点, 以后需要
import xxx from 'xxx'
这样的文件的话需要在 webpack 中的 resolve 项中配置 extensions, 这样以后引入文件就不需要带扩展名
添加页面模板: 在 build 文件夹下新建文件夹 tpl, 然后在 tpl 中新建一个 index.html, 如下:
这时候有了页面模板还是不够的, 还需要将页面模板和打包出来的 JS 文件关联起来, 因为考虑到以后打包出来的 JS 的文件不会是一个固定的名称, 所以这里需要使用一个 webpack 的插件
HTML-webpack-plugin
配置 HTML-webpack-plugin: 首先我们安装一下 NPM install -D HTML-webpack-plugin, 然后在 webpack 的 plugins 配置项下进行一些简单配置:
配置完成后就可以启动项目了
8 . 配置 tsconfig
编译目标 这时候我们切回 tsconfig 配置中, 会发现在 compilerOptions 配置项的 target 是 es5, 也就是说把 ts 代码编译成 es5 规范的代码, 如果不做兼容的话, 我们可以将它设置为 es6, 使其编译成 es6 的代码
模块处理 在 module 项中, 会发现生成的是 commonjs 的模块系统, 因为不考虑兼容, 所以这里我也将其设定为最新的 esnext, 并且将模块处理方式改为用 node 来处理, 设置 moduleResolution 项为 node, 不做模块处理方式设置的话可能会有报错
9 . 项目启动 这时候我们可以在 package.JSON 中添加启动命令 "dev": "webpack-dev-server --config build/webpack.config.JS --mode development", 其中 --mode development 用于指定开发模式, 否则在 webpack4 + 版本下会有警告 然后直接 NPM run dev 即可
总结
其实这个时候项目其实就已经跑起来了, 完全可以不用往下看, 但是实际上的工作并没有做完, 下一章就开始讲解如何提高开发体验
来源: https://juejin.im/post/5bac88d86fb9a05cfe487748