React項目構建

文章目錄

React項目構建

啓動項目

項目依賴安裝

將項目開發基礎文件react-mobx-starter-master.zip解壓縮，並用這個目錄作爲項目根目錄。
在項目根目錄中，執行下面的命令，就會制動按照package.json的配置安裝依賴模塊。
1. npm install或者npm i
按照完成後，會生成一個目錄node_modules,裏面是安裝的所有依賴的模塊

項目整體說明

項目目錄結構
.
├── .babelrc
├── .gitignore
├── index.html
├── jsconfig.json
├── LICENSE
├── .npmrc
├── package.json
├── README.md
├── src
│ ├── App.js
│ ├── AppState.js
│ ├── index.html
│ └── index.js
├── node_modules
│ ├── ...
├── webpack.config.dev.js
└── webpack.config.prod.js

配置文件詳解

package.json文件

npm init時產生的文件，裏面記錄項目信息和所有項目依賴。

配置項目的github鏈接地址

"repository": { /**配置項目的github鏈接地址**/
    "type": "git",
    "url": "https://192.168.124.135/react-mobx/react-mobx-starter.git" 
}

項目管理
```
"scripts":{
    "test":"jest",
    "start": "webpack-dev-server --config webpack.config.dev.js --hot --inline",
    "build": "rimraf dist && webpack -p --config webpack.config.prod.js"
}
```
- start指定啓動webpack的dev server開發用WEB Server,主要提供2個功能：靜態文件支持、自動刷新和熱替換HMR(Hot Module replacement)。
  1.–hot啓動HMR
  * MR可以在應用程序運行中替換、添加、刪除模塊，而無需重載頁面，只把變化部分替換掉。不使用HMR則自動刷新會導致這個頁面刷新。
  2. --inline 默認模式，使用HMR的時候建議開啓inline模式。熱替換時會有消息顯示在控制檯。
- build使用webpack構建打包。對應npm run build
項目依賴
- devDependencies開始時依賴，不會打包到目標文件中。對應npm install xxx --save-dev。例如babel的一些依賴，只是爲了幫我們轉譯代碼，沒有必要發佈到生產環境中。
- dependencies運行依賴，會打包到項目中，對應npm install xxx --save。
開發時依賴
```
"devDependencies": {
    "babel-core": "^6.24.1",
    "babel-jest": "^19.0.0",
    "babel-loader": "^6.4.1",
    "babel-plugin-transform-decorators-legacy": "^1.3.4",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-preset-env": "^1.4.0",
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-0": "^6.24.1",
    "css-loader": "^0.28.0",
    "html-webpack-plugin": "^2.28.0",
    "jest": "^19.0.2",
    "less": "^2.7.2",
    "less-loader": "^4.0.3",
    "react-hot-loader": "^4.3.12",
    "rimraf": "^2.6.2",
    "source-map": "^0.5.6",
    "source-map-loader": "^0.2.1",
    "style-loader": "^0.16.1",
    "uglify-js": "^2.8.22",
    "webpack": "^2.4.1",
    "webpack-dev-server": "^2.4.2"
}
```
- 版本號指定：
  1. 版本號，只安裝指定版本號的
  2. ~版本號，例如~1.2.3表示按照1.2.x中最新版本，不低於1.2.3,但不能安裝1.3.x
  3. ^版本號，例如^2.4.1表示按照2.x.x最新版本不低於2.4.1
  4. latest, 安裝最新版本
  5. 1.2.x或1.x,
  6. *,任意版本
  7. 1.2.7 || >=1.2.9<2.0.0,可以安裝1.2.7，或1.2.9本身或者之上1.2.x版本，但不能是2.x版本。
- babel轉譯，因爲開發用了很多ES6語法。從6.x開始babel拆分成很多插件，需要什麼引入什麼。
- babel-core核心。
- babel-loader webpack的loader,webpack是基於loader裝載器的。
- babel-preset-xxx 預設的轉換插件
- babel-plugin-transform-decorators-legacy 這個插件就是轉換裝飾器用的。
1. css樣式相關的包括：
  - css-loader、less、less-loader、style-loader
- react-hot-loader react熱加載插件，希望改動保存後，直接在頁面上直接反饋出來，不需要手動刷新。
- source-map文件打包，js會合並或者壓縮，沒法調試，用它來看js源文件是什麼。source-map-loader也需要webpack的loader
- webpack打包工具，2.4.1會發佈於2017年4月，當前2.7.0發佈於2017年7月
- webpack-dev-server啓動一個開放時用的server
運行時依賴
```
"dependencies": {
    "antd": "^3.10.9",
    "axios": "^0.16.1",
    "babel-polyfill": "^6.23.0",
    "babel-runtime": "^6.23.0",
    "mobx": "^4.6.0",
    "mobx-react": "^5.4.2",
    "react": "^16.6.3",
    "react-dom": "^16.6.3",
    "react-router": "^4.3.1",
    "react-router-dom": "^4.3.1"
}
```
- antd即 ant design,基於react實現，螞蟻金服開元的react的UI庫。做中後臺管理非常方便
- axios異步請求支持
- polyfill解決瀏覽器api不支持的問題。寫好polyfill就讓你的瀏覽器支持，幫你抹平差異化。
- react開發的主框架
- react-dom 支持DOM
- react-router支持路由
- react-router-dom DOM綁定路由
- mobx狀態管理庫，透明化。
- mobx-react mobx和react結合的模塊
- react和mobx是一個強強聯合

.babel配置文件

.babelrc babel轉譯的配置文件

{
  "presets": [
    "react",
    "env",
    "stage-0"
  ],
  "plugins": [
    "transform-decorators-legacy", 
    "transform-runtime",
    "react-hot-loader/babel"
  ]
}

webpack配置

webpack.config.dev.js文件這是一個符合Commonjs的模塊。
mmodule.exports導出

devtool:'source-map’
- 生成及如何生成source-map文件。
- source-map適合生成環境使用，會生成完成Sourcemap獨立文件。
- 由於在Bundle中添加了引用註釋，所以開發工具知道如何找到Sourcemap。
entry入口
```
entry: {
    'app': [
        './src/index'
    ]
},
```
- 描述入口。webpack會從入口開始，找出直接或間接的模塊和庫構建依賴樹，最後輸出爲bundles文件中
- entry如果是一個字符串，定義就是入口文件。
- 如果是一個數組，數組中每一項都會執行，裏面包含入口文件，另外一個參數可以用來配置一個服務器，我們這裏配置的是熱加載插件，可以自動刷新。
output輸出
```
output: {
    path: path.join(__dirname, 'dist'),
    filename: '[name]-[hash:8].js',
    publicPath: '/assets/'
},
```
- 告訴webpack輸出bundles到哪裏去，如何命名。
- filename定義輸出的bundle的名稱
- path輸出目錄時__dirname+'dist',名字叫做bundle.js。__dirname是nodejs中獲取當前js文件所在的目錄名。
  1. publicPath可以是絕對路徑或者相對路徑，一般會以/結尾。/assets/表示網站根目錄下assets目錄下
resolve解析
```
resolve: {
    extensions: ['.js']
},
```
- 設置模塊如何被解析。
- extensions自動解析擴展名。.js的意思是，如果用戶導入模塊的時候不帶擴展名，會嘗試補全。

module模塊

處理模塊規則：rules匹配請求的規則，以應用不同的加載器、解析器等。

module: {
    rules: [
        {
            test: /\.js$/,
            exclude: /node_modules/, // 不編譯第三方包
            use: [
                //{ loader: 'react-hot-loader/webpack' }, //4.0不需要這一項了
                { loader: 'babel-loader' }
            ]
        },
        {
            test: /\.css$/,
            use: [
                { loader: "style-loader" },
                { loader: "css-loader" }
            ]
        },
        {
            test: /\.less$/,
            use: [
                { loader: "style-loader" },
                { loader: "css-loader" },
                { loader: "less-loader" }
            ]
        }
    ]
},

test 匹配條件的
exclude 排除的，/node_modules/打包排除目錄，這一句一定要擁有，否則編譯器就把這個目錄下所有文件也拿進來了，巨大無比。
use 使用模塊的UseEntries列表中的loader。
rules中對.js結尾的但不在node_modules目錄的文件使用轉譯babel-loader。
加載器use:
1. style-loader通過<style>標籤把css添加到DOM中
2. css-loader加載css
3. less-loader對less的支持

LESS
- CSS好處簡單易學，但是壞處是沒有模塊化、複用的概念，因爲它不是語言。
- LESS是一門CSS的預處理語言，擴展了CSS，增加了變量、Mixin、函數等開發語言的特性。從而簡化了CSS的編寫。
- LESS本身是一套語法規則及解析器，將寫好的LESS解析成CSS。LESS可以使用在瀏覽器端和服務端。
```
@color:#4D926F;

#header {
    color: @color;
}

h2 {
    color:@color;
}
```
- 可以使用解析成如下的CSS
```
#header {
    color:#4D926F
}
h2 {
    color:#4D926F
}
```
- LESS在服務器端使用，需要使用LESS編輯器，$ npm install less,本項目目錄已經安裝過了。
```
編譯輸出到控制檯
$ node_modules/.bin/lessc test.less

編譯輸出到文件
$ node_modules/.bin/lessc test.less test.css
```

plugins:webpack的插件

plugins: [
    new webpack.optimize.OccurrenceOrderPlugin(true),
    new webpack.DefinePlugin({ 'process.env': { NODE_ENV: JSON.stringify('production') } }),
    new webpack.optimize.UglifyJsPlugin({
        compress: {
            warnings: false
        },
        sourceMap: true
    }),
    new HtmlWebpackPlugin({
        template: 'src/index.html',
        inject: true
    })
]

HotModuleReplacementPlugin 開啓HMR
DefinePlugin全局常量配置

devServer,開發用server

devServer: {
    compress: true,
    port: 3000,
    publicPath: '/assets/',
    hot: true,
    inline: true,
    historyApiFallback: true,
    stats: {
        chunks: false
    },
    proxy: {
        '/api': {
            target: 'http://127.0.0.1:8000',
            changeOrigin: true,
            pathRewrite: {'^/api':''}
        }
    }
}

compress 啓動gzip，是否需要壓縮
port 啓動端口3000，啓動時監聽的端口
publicPath 打包文件保存路徑
hot 啓動HMR
historyApiFallback 歷史回退
proxy指定訪問/api開頭URL都代理到http://127.0.0.1:8000去。

vscode配置

jsconfig.json是vscode的配置文件，覆蓋當前配置。

以上是所有配置文件的解釋。拿到這個文件夾後，需要修改name、version、description,需要修改repository廠庫地址，需要修改author、license信息。這些信息修改好之後，就可以開始開發了。

啓動項目

]

啓動成功應該就可以訪問了
webpack使用babel轉譯、打包，較爲耗時，需要等一會。
項目啓動後可以訪問http://localhost:3000/訪問頁面

React項目構建

React項目構建

文章目錄

項目依賴安裝

項目整體說明

配置文件詳解

package.json文件

.babel配置文件

webpack配置

vscode配置

啓動項目

再談23種設計模式（3）：行爲型模式（學習筆記）

Power Automate Desktop 安裝完，登錄後老是提示one driver 錯誤

微前端學習筆記(4):從微前端到微模塊之EMP與hel-micro方案探索

微前端學習筆記（1）：微前端總體架構概述，從微服務發微

985 碩士程序員，空窗 4 個月沒有 Offer！

一文搞懂 Spring 循環依賴

賽博鬥地主——使用大語言模型扮演Agent智能體玩牌類遊戲。

VScode右鍵打開(添加到右鍵)

記一次 .NET某工控視覺自動化系統卡死分析

WindowsServer--SQL Server搭建主從同步實現讀寫分離 - 事務性分發

Doccano標註系統安裝與二次開發

Reids持久化和高可用

播客系統數據庫模型設計--Django播客系統(二)

前端開發及登錄功能實現--Django播客系統(九)

博文接口實現--Django播客系統(八)

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結