element原始碼解析打包構建

本篇文章主要對 element 框架的 build 目錄及 package.json 中的 scripts 指令碼，也就是element專案的指令碼構建打包進行解析。

廢話不多說，先來張圖：

對於node專案，除了對整體結構的瀏覽，第一步要做的事，就是檢視專案的核心檔案，package.json。由於本篇主講scripts，需要了解其他欄位的，可在官方文件檢視

package.json 官方資料

從上圖可以看出，scripts 下很多內容，我們需要關心的主要有兩個，乙個dist（專案構建，生成打包檔案，類似vue-cli 的 npm run build），乙個dev（同 vue-cli 的 npm run dev ）

"dist" : "npm run clean && npm run build:file && npm run lint && webpack --config build/webpack.conf.js && webpack --config build/webpack.common.js && webpack --config build/webpack.component.js && npm run build:utils && npm run build:umd && npm run build:theme"

把需要執行的命令拆開來看：

npm run clean：執行指令碼中的 clean 命令，刪除之前打包的檔案

"clean" :"rimraf lib && rimraf packages/*/lib && rimraf test/**/coverage"

npm run build:file：執行指令碼中的build:file命令，依次是生成 examples/icon.json；生成 src/index.js；生成 examples/pages下國際化相關vue檔案；生成 examples/versions.json；

"build:file" : "node build/bin/iconinit.js & //生成 examples/icon.json node build/bin/build-entry.js & //生成 src/index.js node build/bin/i18n.js & //生成 examples/pages下國際化相關vue檔案 node build/bin/version.js //生成 examples/versions.json

npm run lint：執行指令碼中的lint命令，eslint檢查

"lint" : "eslint src/**/ * test/**/ * packages/**/ * build/**/ *--quiet

webpack --config build/webpack.conf.js：webpack打包，lib目錄下打包 index.js檔案（瀏覽器使用的js包）.

webpack --config build/webpack.common.js：webpack打包，lib目錄下生成element-ui.common.js 檔案（node下使用的檔案，對應 package.json 中的 main 字段）

webpack --config build/webpack.component.js：webpack打包，lib下生成元件的 js 檔案

npm run build:utils：執行 build:utils 命令，babel 打包src目錄下檔案至lib，忽略index.js

"build:utils" : "cross-env babel_env =utils babel src --out-dir lib --ignore src/index.js

"build:umd" : "node build/bin/build-locale.js

npm run build:theme：執行 build:theme 命令，生成樣式

"build:theme" : "node build/bin/gen-cssfile && gulp build --gulpfile packages/theme-chalk/gulpfile.js && cp-cli packages/theme-chalk/lib lib/theme-chalk

"dev" : "npm run bootstrap && npm run build:file && cross-env node_env =development webpack-dev-server --config build/webpack.demo.js & node build/bin/template.js ",

還是拆開看：

安裝包；

生成index.js

webpack 啟動

tpl字尾模板檔案的處理

element原始碼解析–整體介紹

element原始碼解析打包構建

原始碼debian打包

Fabric 原始碼解析原始碼目錄解析

拜讀及分析Element原始碼 button元件篇

element原始碼解析 打包構建

原始碼debian打包

Fabric 原始碼解析 原始碼目錄解析

拜讀及分析Element原始碼 button元件篇

相關推薦

element原始碼解析打包構建

Fabric 原始碼解析原始碼目錄解析