前端工程化实践（一） - 项目初始化

这是我参与更文挑战的第5天，活动详情查看：更文挑战

一、前言

前端项目说简单也确实简单，一个html文档就是一个前端项目

但是随着前端的发展，却又并没有那么简单，要考虑方方面面的需要，所以出来了前端工程化，而前端工程化好像又不是必须的。

对于大多数同学来说，前端工程化的概念还是过于片面，觉得webpack已经解决了所有，自己集中精力写前端代码，实现业务逻辑就可以了。

非也，为了保持项目的稳定，特别是多人合作的情况下，项目访问量到了一定的量级，如果还是打包上传，那么必要是不合理的。

下面是我对前端工程化的思考，并且从一个前端项目开始搭建，然后慢慢的演进，看看如何从前端工程化的角度来建设前端工程。

二、开发环境

Node版本: 12.13.0
NPM: 6.12.0
Yarn: 1.22.10
OS: Mac
开发工具：VSCode

三、CRA构建前端初始化项目

这里我们使用typescript开发项目

yarn create react-app fronted-demo --template typescript

cd fronted-demo

yarn start   // startup demo

目录结构如下

这样项目初始化就完成了，接着我们要进一步处理。

四、修改tsconfig.json，优化引入方式

在项目中，我们经常看到引入路径

import Api from "../../../api/request"

这种相对路径引入文件，每次都要计算文件层级，不利于我们开发，我们修改根目录下tsconfig.json, 让所有文件路径从项目根目录读取。

{
    "compilerOptions": {
        "target": "es5",
        "baseUrl": "."  // 新增部分，代表当前根目录所在的路径
    }
}

// 修改后，引入文件的方式
import Api from 'src/api/request'

注意这种方式仅仅配置了ts文件，在tsx文件中引入有效，如果在js文件中引入，需要另外修改webpack配置

五、引入UI组件库

ui组件库，这里选择antd，对于某些大一点的公司，一般都会有自己的组件库，后面我们也会写如何搭建前端UI组件库。

yarn add antd

在App.css 中引入 

@import '~antd/dist/antd.css';

六、代码格式化

代码格式化我觉得是项目必须的内容，好的代码就是艺术。

代码格式化，你可以选择编辑器自带的一些插件，也可以使用针对开发语言的插件。这里，我选择pretter

yarn add --dev --exact prettier

package.json

"prettier": "npm run format:js & npm run format:less",
"format:js": "prettier --parser --write ./src/**/*.js",
"format:less": "prettier --parser --write ./src/**/*.less",

这样，我们执行npm run prettier就可以将src目录下的js和less文件进行格式化了。

当然也可以忽略某些文件的格式化：

在根目录下新建.prettierignore

可以配置某些格式化规则，缩进、单引号、双引号等等

在根目录下新建.prettierrc或.prettierrc.json等都可以，具体信息可以看官网配置

七、在React中使用Less

less是css的预处理语言，如果要在项目中使用less，需要引入webpack的css-loader加载器，这样的话就需要修改webpack配置了

通过CRA构建的项目，webpack配置是隐藏的

想要修改webpack通常有两种方式

通过插件去增加或覆盖webpack配置
或者释放项目中的webpack配置，使之可见，然后可以修改

由于一般情况下，我们对webpack的定制化需求不高，改动量较少，所以我们选择通过插件覆盖webpack配置。

具体操作

1、下载插件和依赖

由于less-loader>8版本以上，配置方法有变动，无法适配addLessLoader，所以这里使用7版本适配

yarn add react-app-rewired customize-cra babel-plugin-import -D
yarn add less less-loader@7.1.0 -D

2、修改`package.json`

{
  "scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-scripts eject"
  }
}

3、在项目根目录下新建文件`config-overrides.js`

const { override, fixBabelImports, addLessLoader } = require("customize-cra");

module.exports = override(
    fixBabelImports("import", {
        libraryName: 'antd',
        libraryDirectory: "es",
        style: true
    }),
    addLessLoader({
        lessOptions: {
            javascriptEnabled: true
        }
    })
);

App.css和index.css修改为App.less和Index.less

4、启动项目

yarn start

八、样式初始化

众所周知，前端对于浏览器兼容是必须要考虑的问题，但是每个浏览器对于样式的显示都不尽相同，那么就需要在项目开始的时候，统一下样式。

下面是一些常见的样式初始化

* { padding: 0; margin: 0; }

常见的，最简单的方式，但是这样处理的话，页面渲染的时候，会对每个元素重置样式，包括不需要重置的元素，这无疑增加了性能的开销

访问量小的网站可以忽略这个问题，但是随着访问量的增加，明明可以优化的地方还是要注意优化的。

在项目/src/assets/styles/下新建common.less，写入下面的样式，引入。

/* reset css */
body,div,ul,ol,li,p,h1,h2,h3,h4,h5,h6,form,fieldset,table,td,img{
  padding: 0;
  padding: 0;
  border: 0;
  box-sizing: border-box;
}

/* clear float */
.clear-float {
  zoom: 1;
}
.clear-float:after{
  display: block;
  visibility: hidden;
  content: "";
  clear: both;
  height: 0;
}

/* base style，you should config styles to your web */
body {
  background:#fff;
  color:#333;
  font-family: "SimSun","宋体","Arial Narrow";
}

ol,ul {
  list-style: none;
} 

caption,th{
  text-align:left;
}

/* custom style */
.margin-right-5 {
  margin-right: 5;
}

.float-left {
  float: left;
}
.float-right {
  float: right;
}

.text-center {
  text-align: center;
}

在/src/index.tsx中引入

import 'src/assets/styles/common.less'