從零開始封裝React UI 組件庫並發布到NPM

github 開源地址：zswui

github 說明文檔：wiki

 

1.新建目錄wui

（1）進入到 wui 目錄 執行 npm init 命令初始化項目。更具提示信息填充將會生成的 package.json 文件。

（2）新建 webpack.config.js 打包文件。

（3）新建 README.md 項目說明文件。

（4）新建 .gitignore 項目忽略文件。

（5）安裝webpack 用於編譯 JavaScript 模塊。

npm install webpack webpack-cli --save-dev

　　

（6）安裝 babel 相關的編譯庫，將javascript 代碼轉換成 瀏覽器兼容的代碼。

npm install babel-loader @babel/core --save-dev 

　　

（7）給 webpack.config.js 配置 babel-loader 解析信息，。

// module 表示模塊信息
module: {
        rules: [
            { test: /\.js$/, exclude: /node_modules/, loader: "babel-loader" }
        ]
}

　　

（8）創建 .babelrc 文件

雖然已經配置好了 Babel ，但並沒有讓它真正生效。在項目的根目錄中創建一個 .babelrc 文件並啟用一些插件。

首先，你可以使用轉換 ES2015+ 的 env preset 。

npm install @babel/preset-env --save-dev

　　

為了讓 preset 生效，你需要像下面這樣定義你的 .babelrc 文件

{
  "presets": ["@babel/preset-env"]
}

　　

(8) 安裝 編譯 jsx 語法的庫

npm install --save-dev @babel/preset-react

　　修改.babelrc文件配置

{
    "presets": [
        "@babel/preset-env",
        "@babel/preset-react"
    ]
}

　　

(9) 安裝 html-webpack-plugin 插件，生成 html 文件.配置到 webpack.config.js 文件

npm install  html-webpack-plugin  --save-dev

　　

(10) 安裝 react 相關的包

npm i react react-dom --save-dev

　　

(11) 安裝 webpack-dev-server 作為本地開發環境

npm  i webpack-dev-server -g

　　

(12) 在 package.json文件中添加自定義啟動腳本

"scripts": {
    "start": "webpack --config webpack.config.js",
    "test": "npm run test"
}

　　

 (13) 安裝清理文件夾的插件

npm install clean-webpack-plugin --save-dev

　　

(14) 安裝提取 css 到一個文件的庫

npm install --save-dev extract-text-webpack-plugin

　　

(15) 安裝支持 sass / less 文件的庫

npm install --save-dev style-loader css-loader

npm install --save-dev less-loader less

npm install sass-loader node-sass webpack --save-dev

配置 webpack.config.js （14，15 步驟配合操作）

　　

 

package.json 字段含義解釋：
1.name 包名，如果有重名可以添加 scoped 前綴,例如（@winyh/wui）
2.verson 版本號，每次發布版本前需要遞增修改版本號
3.description 包簡介。
4.private 是否私有。一定要設置為 false
5.main 項目入口。
6.directorities 描述模塊的結構,暫時可以忽略。
7.scripts 執行腳本，可以在這里添加自定義的執行腳本。
8.registory 倉庫地址，設置代碼所在倉庫地址。
9.keywords 關鍵字，設置倉庫的關鍵字，方便檢索。
10.author 作者，可以輸入作者名稱。
11.license 許可協議。
12.bugs 提交地址。
13.homepage 項目主頁。
14.devDependencies 開發環境依賴包記錄。

 

發布：
1.修改package.json文件，添加 "private": false 設置當前組件庫為非私有的。否則 npm publish 會報錯。
2.修改 version 版本號，npm 發布版本時，會向上疊加（v0.0.1 -> v0.0.2)。發布前不修改版本號也會報錯。
3.執行 npm login 登錄 npm 賬戶（需要現在官網注冊npm賬號）。
4.執行 npm publish 發布最新版本。（發布成功后一般注冊郵箱會收到發布版本的消息）

1.報錯：
(1)Tapable.plugin is deprecated. Use new API on `.hooks` instead
原因：
extract-text-webpack-plugin目前版本不支持webpack4
解決辦法：
npm install extract-text-webpack-plugin@next

2.報錯：

　　Can't resolve 'style-loader

   npm i style-loader --save-dev