前端工程化實踐 - 項目初始化

這是我參與更文挑戰的第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配置修改