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

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

1、前言

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

可是随着前端的发展，却又并无那么简单，要考虑方方面面的须要，因此出来了前端工程化，而前端工程化好像又不是必须的。

对于大多数同窗来讲，前端工程化的概念仍是过于片面，以为webpack已经解决了全部，本身集中精力写前端代码，实现业务逻辑就能够了。

非也，为了保持项目的稳定，特别是多人合做的状况下，项目访问量到了必定的量级，若是仍是打包上传，那么必要是不合理的。

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

2、开发环境

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

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

这里咱们使用typescript开发项目

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

cd fronted-demo

yarn start   // startup demo
复制代码

目录结构以下

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

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

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

import Api from "../../../api/request"
复制代码

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

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

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

复制代码

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

5、引入UI组件库

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

yarn add antd

在App.css 中引入 

@import '~antd/dist/antd.css';
复制代码

6、修改webpack配置，在react中使用less

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

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

想要修改webpack一般有两种方式

• 经过插件去增长或覆盖webpack配置
• 或者释放项目中的webpack配置，使之可见，而后能够修改

因为通常状况下，咱们对webpack的定制化需求不高，改动量较少，因此咱们选择经过插件覆盖webpack配置。

具体操做

一、下载插件和依赖

yarn add react-app-rewired customize-cra babel-plugin-import -D
复制代码

二、修改package.json

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

复制代码

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

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

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

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

四、启动项目

yarn start
复制代码

7、样式初始化

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

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

* { 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'
复制代码

8、参考

react项目关于webpack配置修改