如何建立乙個前端 React 元件並發布到 NPM

首先npm文件擺在這裡：

參考元件

「造輪子」是非常有效的學習方法。在熟練掌握api的搬運方法之後，我們可以通過自己「造輪子」來進一步掌握和理解更底層的知識。自己完成乙個元件的開發之後，我們可以打包上傳到 npm 來分享自己的成果。在後面的步驟中，將會實現以下幾個小目標：

配置開發環境

開發元件

打包元件，並在測試專案中引入打包元件模組，驗證元件功能

發布到 npm

開始乙個最基本的 react 工程，我們至少需要以下幾項配置：

我在這個例子裡面做了乙個叫做 react-tiny-autosuggest 的元件。首先建立 project 並且初始化。

mkdir react-tiny-autosuggest cd react-tiny-autosuggest

npm init -y

這裡我們需要改動三個地方：

// package.json
..."main": "dist/bundle.js",
"files": ["dist"],
"scripts": ,
...

接下來安裝依賴

npm i react react-dom npm i -d babel-loader @babel/core @babel/preset-env @babel/preset-react webpack webpack-dev-server webpack-cli html-webpack-plugin webpack-node-externals css-loader style-loader

接下來配置 webpack。這裡分成兩份配置，乙份用於開發環境(development)，乙份用於單獨打包元件用於生產環境(production)。

在開發環境下，我們需要搭建乙個完整的專案，讓我們可以開發元件，並可以將其引入其他元件，渲染到瀏覽器中看到效果。同時我們也需要一些開發工具的支援，比如 hmr（hot module reloa）元件熱更新和詳細的報錯資訊。

在生產環境下，只需要打包元件本身，不包括工程裡面的其他元件。同時我們需要壓縮檔案體積，盡量減小元件打包之後的體積。

下面是我們的 webpack 開發配置

const path = require('path');
const htmlwebpackplugin = require('html-webpack-plugin');
module.exports = ,
module: ,,]
},devserver: ,
plugins: [
new htmlwebpackplugin()
],};

production 打包配置，區別是改變了 entry，因為我們只需要單獨的元件，並且改變了 librarytarget，這個配置項的預設引數是 'var'，我們需要改成 commonjs2，這樣可以通過模組系統引入這個元件。另一點區別是使用了 nodeexternals 使得打包的元件中不包括任何 node_modules 裡面的第三方元件，起到減小體積的作用。

const path = require('path');
const nodeexternals = require('webpack-node-externals');
module.exports = ,
module: ,,]
},externals: [nodeexternals()]
};

在 package.json 中，我們可以通過 --config 指定 webpack 使用哪一套配置。在這個 demo 裡使用了 stylus 來寫樣式文件，所以新增了相應的 css pre-processor，把 stylus 語法轉化為 css 語法。並且在引入 css 的時候使用了模組化 css 以避免全域性命名衝突。

完成以上配置以後，我們可以在 src 資料夾裡面開發自己元件。執行 npm run dev，讓 webpack-dev-server 渲染到瀏覽器中，實時看到效果。

打包元件，只需要執行 npm run build 就可以了。

接下來可以通過npm link把打包之後的元件引入到 global node_modules 中，然後在驗證 demo 中再通過npm link react-tiny-autosuggest引入這個元件，並驗證是否符合預期。

// at development directory npm run build npm link cd [test project folder]

npm link react-tiny-autosuggest

接下下 demo 裡面就可以直接import autosuggest from 'react-tiny-autosuggest'了。

發布元件到 npm:npm publish

取消發布:npm unpublish

更行版本: 更改 package.json 裡面的版本號並重新發布

如何建立乙個前端 React 元件並發布到 NPM

ionic如何建立乙個元件 photoSwipe

建立乙個react專案

如何架構乙個 React 專案？

如何建立乙個前端 React 元件並發布到 NPM

ionic如何建立乙個元件 photoSwipe

建立乙個react專案

如何架構乙個 React 專案？

相關推薦