UI 框架的集成

這一章中我們把之前完成的代碼進行優化、整合和包裝，達到可以在實戰項目中直接使用的狀態。在這一章的內容裏，會涉及到一些基於 nodejs 的工具，並且會使用 shell 腳本來完成一些輔助的工作。

我們這一章主要包含兩部分內容。第一部分是把我們之前零散的文件打包成一個最終壓縮好的文件，提供給傳統的項目使用。第二部分是再把壓縮好的目標文件依照 npm 包的規則進行修改，併發布到 npm 源上，提供給一些基於 npm 的項目使用。下面來簡單說下這兩部分內容裏都要做哪些事。

一、文件方式的集成

在以文件方式集成中，我們會處理如下幾個問題：

源文件中都是使用 @import 做的文件引入，我們需要藉助工具對 @import 做解析，把零散的文件集合到一個 CSS 文件中。
之前在書寫樣式的時候，沒有寫兼容的語句，這裏我們要藉助工具來解決兼容性問題。
最後要把文件做最小化的壓縮，生成 .min.css 的文件提供給別的項目引用。
使用 shell 腳本完成整個集成的過程，減少命令的輸入。

二、製作併發布 npm 包

在使用 npm 方式集成的時候，我們會利用上一步打包生成的樣式文件。但在前面生成文件的基礎上，我們會更改這個項目對字體圖標庫的依賴方式，以符合 npm 的規範。這一節我們在適配完 npm 包，還會把做好的 npm 包發佈到 npm 官網上。

使用文件形式直接集成

我們這一章來做 UI 樣式庫的集成，在上一章的開篇中也提到了，現在這個樣式庫還存在以下三個問題：

使用 @import 引用了太多的文件，會拖慢加載速度，不可能直接用在生產環境。
沒有處理兼容性的問題，要添加兼容性寫法。
文件沒有壓縮，體積會比較大，同樣會影響加載速度。

我們就是要解決這幾個比較關鍵的問題。最後，我們會得到一個解決掉這些問題後的最終文件，就可以直接在生產環境使用了。最終會生成下面這兩個目標文件：

/dist/my-ui.min.css
/dist/my-ui.css

其中 /dist/my-ui.min.css 就是我們可以在生產環境使用的最終文件。此外還生成了一個非壓縮的 tuitui-ui.css，這個文件和壓縮後的文件內容是一樣的，只不過沒有進行壓縮。生成這個文件是爲了可以看到帶有格式的最終文件，如果出現問題可以快速定位出問題的地方。

環境的搭建

在做打包的時候，我們需要使用一些工具來輔助，我們先把這些工具介紹一下。

一、Node.js + npm + npx

首先是 Node.js + npm + npx 這個套裝，下來介紹這三個都是做什麼的：

@ Tips:
Node.js 是運行在服務端的 JS 語言，可以用來處理前端的文件，它是我們這一節要用到的工具的環境基礎。
npm (Node.js Package Manager) ，是 Node.js 的包管理工具，主要用來管理 Node.js 項目的依賴包，包括對包的安裝、查看和卸載等。
npx，這個工具是 Node.js 插件的執行工具，它可以執行 npm 包中包含的命令。

然後我們安裝 Node.js，Windows 和 Mac 用戶都可以在Node.js官網下載對應的安裝包（Widnows 下載 .msi 格式的文件，Mac 下載 .pkg 格式的文件），然後直接安裝就可以了。我這裏用的是 8.16.0 的版本，裏面會包含 Node.js、npm 和 npx 三個工具。安裝好以後，在命令行裏執行下面命令來查看 Node.js、npm 和 npx 的版本：

如果發現 npx 沒有的話，可以執行下面命令手動安裝：

npm i [email protected] -g

最後一步，就是要把我們之前的項目，使用 npm 初始化一下，這樣纔可以使用 npm 來安裝需要的插件。在項目目錄裏執行下面的命令：

npm init

隨後輸入項目相關的信息，包括名稱、版本、關鍵詞等，這裏什麼都不輸入，直接回車也不會影響使用，以後也可以再改。

完成後就會在項目根目錄中，生成一個 package.json 文件：

{
  "name": "my-ui",
  "version": "1.0.0",
  "description": "my-ui",
  "main": "-",
  "scripts": {
    "test": "-"
  },
  "repository": {
    "type": "git",
    "url": "[email protected]:mytech/my-ui.git"
  },
  "keywords": [
    "my-ui",
    "mytech",
    "ui"
  ],
  "author": "mytech",
  "license": "ISC"
}

這個文件就是 npm 的配置文件了，這樣，有關 Node.js 的工作就完成了。

二、postcss

這裏要介紹的第二個內容是，基於 Node.js 的postcss工具。這是一個 CSS 處理工具，在使用的時候還需要搭配其他的插件來配合。我們先使用 npm 把這個插件安裝上，這裏我們直接使用命令行工具來安裝這個插件，所以安裝的插件名稱應該是“postcss-cli”。

npm i [email protected] -D

這條命令裏 -D 的含義是把這個包的版本信息記錄在 package.json 裏的 devDependencies 字段裏，表示這是在開發過程會使用到的插件。

這樣這個插件就裝好了，我們可以用下面的命令來測試一下：

npx postcss src/my-ui.css -o dist/my-ui.css

這條命令的含義就是使用 npx 調用了 postcss-cli 提供的 postcss 命令，後面跟着的就是一些參數。這條命令實際的格式是：

npx postcss 要處理的 CSS 文件位置 -o 生成目標文件的位置

執行完這一條命令後，就會在根目錄下生成一個 dist 目錄，裏面就是剛生成的my.css。但是命令行裏會提醒你，沒有使用任何插件，最後生成的文件基本沒什麼處理，只是在主文件的最後加了個 sourceMapping，我們後面再加上其他插件來處理。走到這裏沒有問題的話，就說明我們的環境就配置好了。

對 @import 的處理

接下來處理 @import 的問題，這裏要使用到“postcss-import”這個插件。這個插件可以把 @import 方式引入的本地路徑轉變成這個路徑裏的 CSS 語句。經過這樣處理以後，所有的樣式文件就會被集中到目標文件裏，@import 只剩下一個遠程的路徑，項目本地的 @import 就沒有了。

我們先來安裝一下這個插件：

npm i [email protected] -D

安裝好以後，我們就可以在剛纔的打包命令裏添加這個插件來完成對@import的處理：

npx postcss src/my-ui.css -o dist/my-ui.css -u postcss-import --no-map

這裏我們在之前的命令後面又加了些東西，“-u postcss-import”是表示在使用 postcss 處理 CSS 文件時要使用“postcss-import”插件。最後多的“–no-map”是爲了去掉生成文件最後的sourceMapping信息。經過這樣處理，會發現目標文件裏的內容就變多了，各個文件的內容都被集成到這一個文件裏了：

@ Tips:
這裏要注意兩個問題：
1、文件中引入字體圖標庫用的遠程 @import 並不會被替換，但會被提到文件的最前面。
2、我們的項目裏沒有涉及圖片，如果需要處理圖片的項目可以使用“postcss-url”來處理圖片的路徑問題。

對兼容性的處理

接下來要處理兼容性問題。目前來看，大部分 CSS3 的樣式已經可以在新的瀏覽器上運行了，但是，有些屬性或者屬性值是要添加瀏覽器前綴後纔可以用，所以我們還是要對代碼進行兼容處理。在處理移動端樣式的問題時，我們不再手動添加瀏覽器前綴，這裏要介紹一個叫做“Autoprefixer”的插件。這個插件會分析代碼，並根據Can I use這個網站提供的兼容性數據來自動添加兼容寫法。下來我們先安裝一下這個插件：

npm i [email protected] -D

安裝好以後就可以直接在命令中使用這個插件了：

npx postcss src/my-ui.css -o dist/my-ui.css -u postcss-import autoprefixer --no-map

這條命令執行後，就可以去文件中找到一些樣式被添加上了兼容寫法，以我們之前開發的圖標，上下振動的樣式爲例。原有代碼：

處理後的代碼：

經過前後對比，就可以發現，原有代碼中的 animation 和 @keyframes 都被添加了兼容寫法，但是 transform 並沒有添加兼容寫法。這是因爲默認情況下， autoprefixer 會給沒有廢棄的且佔有率 > 0.5% 或者是最新發布的兩個版本以內的瀏覽器提供兼容支持，但是這種配置不一定安全，所以我們也可以自己去調節這個兼容範圍的配置。autoprefixer 的兼容性配置方式使用的是browserslist工具提供的規則，所以我們按着 browserslist 的規則來配置需要的規則就可以了，這個工具需要在項目的根目錄上建立“.browserslistrc”這個文件：

我們使用的是這樣的配置，指定了對覆蓋率大於 0.5% 或者是最新 2 個版本內的瀏覽器提供支持，並且可以不支持舊版本的 IE 和 IE_Mob。和默認配置相比，是去掉了not dead這個選項，表示對已經廢棄的瀏覽器版本也提供前面規則的支持，這樣會更安全一點。經過這樣的配置再重新執行前面的命令，就會發現像 transform 這種屬性也會被添加兼容寫法：

我們使用的這個配置方式比較籠統，而 browserslist 可以支持區分瀏覽器的設置。到這裏我們對兼容性的處理也完成了。

壓縮CSS文件

最後一個要處理的問題就是壓縮了，這裏要使用的插件是“cssnano”。這個工具會把CSS文件裏的註釋和空格都去掉，經過處理後就可以生成我們最終需要的壓縮文件了。我們還是先來安裝這個插件：

npm i [email protected] -D

這個插件也可以直接按着默認配置來使用，可以按下面的命令進行執行：

npx postcss src/my-ui.css -o dist/my-ui.min.css -u postcss-import autoprefixer cssnano --no-map

這裏我們把輸出的文件名改成了 dist/my-ui.min.css，這表示是壓縮後的文件。執行完這條命令以後，原來文件中的註釋和空格就都被去掉了，最後會生成一個新的 /dist/my-ui.min.css

這樣我們把文件壓縮的問題也解決了，最後生成的這個文件我們就可以直接在別的項目使用了。

shell腳本的編寫

最後一步，我們來寫一個 Shell 腳本來記錄下前面的命令，免得每次打包都要輸入那麼一大串的命令。Shell 腳本通常是在Linux 或者 Mac 系統上才能使用的一種命令式語言，但 Windows 上使用 gitbash 這類工具的話也能支持一部分 Shell 命令。我們先在根目錄下建一個名爲“shell”的目錄，然後在裏面放一個“build.sh”的文件：

# 清空dist目錄中的舊文件
echo '正在清除原有dist文件...'
rm -rf dist/*.css

# 打包出不壓縮的CSS文件my-ui.css
echo '正在生成tuitui-ui.css文件...'
npx postcss src/my-ui.css -o dist/my-ui.css -u postcss-import autoprefixer --no-map 

# 打包出被壓縮的CSS文件my-ui.min.css
echo '正在生成my-ui.min.css文件...'
npx postcss src/my-ui.css -o dist/my-ui.min.css -u postcss-import autoprefixer cssnano --no-map

這個腳本很簡單，就是順序執行幾條命令：

首先是清空原有的 dist 目錄，來避免一些不必要的錯誤。
然後執行生成 /dist/my-ui.css 文件的命令，就是剛纔在解決兼容性問題時用的那條命令。
最後執行生成 /dist/my-ui.min.css 這個壓縮文件的命令，也就是上一步我們用過的那條。

製作完這個腳本以後，再想打包項目，就可以直接在項目裏調用這個腳本了。可以在項目根目錄執行：

./shell/build.sh

使用 npm 形式集成

我們這一章用 npm 的方式來集成代碼。我們會介紹 npm 包的結構、npm 包的製作和發佈過程。

npm包的介紹

npm 是 JS 的包管理工具，我們可以用它來下載已有的代碼，可以很快的引用別人發佈過的代碼。前面我們已經使用 npm 安裝了幾個工具，那幾個工具其實就是幾個 npm 包。安裝好的 npm 包會被放在項目裏的 node_modules 裏，我們找一個包來看下它是什麼樣的結構，以上一節用的 postcss-cli 爲例：

這個包裏的內容並不多，這裏面最重要的就是“package.json”這個文件，有了這個文件，就可以說這是一個 npm 包的結構了，而另外的文件就是插件功能邏輯的源碼和一些說明文件。

當我們引用這個插件的時候，Node.js 就會讀取 package.json 裏的內容，根據 main 字段指定的路徑去引用對應的文件。postcss-cli 這個插件的入口文件就是“index.js”，在“index.js”裏又會引用lib目錄裏的代碼。

package.json 文件是一個 JSON 格式的配置文件，所有插件相關的信息都會記錄在這個文件裏。下來我們來介紹下package.json 裏幾個比較重要的字段。

name：這個字段指定 npm 包的名稱，我們發佈 npm包以後，包的名稱就是這個字段指定的，和目錄名稱沒什麼關係。
version：這是 npm 插件的版本號，每次發佈的時候不能使用原來的版本。
description：npm 包的描述信息，用比較簡短的語言描述這個插件是做什麼的。
keywords：npm 包的一些關鍵詞，用戶可能會根據這些關鍵詞模糊搜索到你的插件，如果希望你的 npm 包更容易被找到，可以好好設計一下這個關鍵詞。
main：這是npm包的主文件，通常是一個 JS 文件，但這個字段也可以是 CSS 文件。
license：指定 npm 包的開源模式，是隻允許調用代碼，還是可以隨意改動。
dependencies：這是一個很重要的字段，在 npm 包中，你可以使用其他的插件，這個字段就是指定你這個包都需要哪些依賴的。只要和上一節中那樣把需要的插件名稱和版本填寫到這個字段中，就可以直接引用了。
devDependencies：這個字段和上面一個很類似，它倆的區別就是所安裝插件的作用不同，dependencies 記錄的通常是會被打包到最終代碼裏的 npm 包，而 devDependencies 字段記錄的是開發過程需要用到的 npm 包。

npm包的製作

下來我們開始製作 npm 包，這個過程分三步來實現，分別是項目初始化、依賴的配置和添加文件說明。

一、項目初始化

我們這裏爲了減少 npm 包裏的文件，不打算在原有的項目上直接進行發佈，會重新建立一個新的項目。我們先建一個名爲“my-ui-npm”的目錄，然後和上一節一樣，在目錄下執行下面的命令對目錄進行 npm 的初始化：

npm init

這樣就生成好了 package.json 文件：

{
  "name": "my-ui",
  "version": "0.1.1",
  "description": "my-ui",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [
    "my-ui",
    "mytech",
    "ui",
    "mobile"
  ],
  "author": "mytech",
  "license": "ISC"
}

現在，這就是一個 npm 項目了，這裏我們把版本先定到“0.1.1”，等使用一段時間穩定後再把版本從“1.0.0”開始計算。接下來我們在 my-ui-npm 目錄下創建一個名爲“css”的目錄，然後把之前項目裏生成的最終文件 my-ui.min.css 移到新建好的 css 目錄裏。這樣項目初始化的工作就完成了。

二、依賴的配置

這一步我們來配置依賴，我們之前打包好的樣式是使用網絡地址來加載依賴文件 font-awesome 的。但在 npm 中，要遵循 npm 的設計規則，在插件裏再引用網絡地址就不太合適了，所以我們這一步就是要更改項目依賴的引入方式。

這裏我們使用 npm 引入依賴的方式，首先要在新的這個項目中安裝 font-awesome 依賴，命令如下；

npm i [email protected] -S

-S 參數就是在 dependencies 裏記錄所安裝插件的信息，這樣項目的依賴就安裝好了，package.json 裏多了下面這段內容：

"dependencies": {
    "font-awesome": "^4.7.0"
}

有了這個依賴，原來打包好代碼裏的網絡地址就可以去掉了.

最後一步，我們再在根目錄下添加一個index.js文件，把需要的兩個css文件都引入進去。

@ TIps：
這裏有兩個地方要注意下：
1、npm工具只能通過js來引入包，不能直接用css引用其他的插件。
2、在index.js裏引入css文件，這種引用方式只有在像webpack這種可以把CSS當做JS模塊來處理的工具裏纔可以使用。如果是其他情況就要手動的用路徑去引用CSS文件。

這樣我們這個項目的依賴配置就完成了。

三、添加說明文件

最後，在這個項目裏添加一個簡單的說明文件，在根目錄下建立一個“README.md”文件：

# my-ui樣式庫


## 說明
本插件依賴[email protected]，安裝本插件的同時也會安裝font-awesome。在使用本UI樣式庫的時候可以直接引用對應的CSS文件：

import 'font-awesome/css/font-awesome.min.css';
import 'my-ui/css/my-ui.min.css';


同時，本插件已經使用js文件打包了兩個css文件，在支持CSS模塊的項目裏也可以像下面這樣直接引用插件：

import 'my-ui';

這樣我們的 npm 包就建好了，下一步我們要把它發佈到npm上。

npm包的發佈

下來我們做 npm 的發佈，這一步其實比較簡單。

一、註冊npm帳號

如果想在npm上發佈新的代碼包，必須註冊稱爲 npm 的用戶，官方地址是https://www.npmjs.com/。進入後點Join按鈕就可以進入用戶註冊頁面了。在註冊頁面填上相關信息，然後創建一個新的用戶就行了。

二、發佈前的檢查

如果要把代碼包發佈到官方的 npm 源上，要確保我們當前使用 npm 源也是官方的。像淘寶源這些非官方源只支持npm包的下載，但會明確說明不能支持 npm 包的發佈。

下來我們檢查一下本機用的到底是哪個源，在命令行中輸入下面的命令：

npm config get registry

如果要改回到官方的源地址，可以直接用命令來切換：

npm config set registry https://registry.npmjs.org

這樣 npm 源就切換成功了。接下來還要檢查下我們要發佈的npm包的名稱是不是有重複的，可以在npm官網上搜索一下你要發佈的包名，如果像下面這樣找不到重名的包，就可以進入發佈工作了。

三、npm包的發佈

最激動人心的一步來了，我們要把這個源發佈到 npm 上了。首先要在項目目錄裏執行下面命令來初始化 npm 用戶信息：

npm adduser

執行完命令後輸入你註冊時使用的用戶名和密碼，另外還要輸入一個用於接收消息的電子郵箱地址，都完成後就完成了登錄：

這裏要注意，只有在第一次發佈的時候才需要使用“npm adduser”命令，如果以後再登錄，直接使用下面的命令就可以了：

npm login

這個命令一執行成功，你的代碼就發佈到 npm 上了，所以這個操作要稍微慎重一點，確認好代碼沒有問題了再去執行。發佈完成以後，會有一個很簡單的提示，這看起來根本不像剛做了一個很手抖的操作。

這樣我們的包就發佈完了，現在可以直接在其他項目中直接使用 npm下載我們的 UI 樣式庫了：

如果發現我們發佈的版本有問題的話，在 24 小時以內還是可以對發佈的版本進行刪除。這是因爲擔心你發佈的包被別的項目引用後，如果你刪掉會導致使用你 npm 包的項目全都廢掉，所以會有個時間限制。這裏建議如果不是很嚴重的問題，最好使用“npm deprecate”命令來標記這個版本是廢棄的，而不是去強行刪除掉。

到這裏 npm 包的發佈工作就全部完成了。

手把手帶你打造自己的UI樣式庫（第四章）之UI框架的集成

UI 框架的集成

一、文件方式的集成

二、製作併發布 npm 包

使用文件形式直接集成

環境的搭建

一、Node.js + npm + npx

二、postcss

對 @import 的處理

對兼容性的處理

壓縮CSS文件

shell腳本的編寫

使用 npm 形式集成

npm包的介紹

npm包的製作

一、項目初始化

二、依賴的配置

三、添加說明文件

npm包的發佈

一、註冊npm帳號

二、發佈前的檢查

三、npm包的發佈

螞蟻面試：Springcloud核心組件的底層原理，你知道多少？

認知提升的方法

C#開源的兩款功能強大的錄屏神器

前端學習之Ajax（一）

React的初步探索

js對字符串的順序截取

windows系統下安裝深度系統deepin

less動態樣式語言（預處理語言）

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

linux以太網驅動總結