基於create-react-app打包編譯本身的第三方UI組件庫併發布到npm

時間 2019-11-05

標籤基於 create react app 打包編譯本身第三方組件併發 npm 欄目 React 简体版

原文原文鏈接

前言

這篇文章主要是總結一下咱們在工做中如何爲公司開發內部的第三方UI組件，並經過npm install的方式安裝的一些步驟和思路。在學習完這套發佈方法後你們也能夠快速的發佈本身的UI庫到npm，供他人使用，就好比elementUI或者Ant Design。javascript

若是想學習如何發佈一個js庫或者框架，那麼使用rollup更爲適合，能夠參考以下文章：css

前端組件/庫打包利器rollup使用與配置實戰前端

實現效果

首先咱們看一下實現效果，好比咱們本地開發了一個Tag組件：vue

藍色的按鈕就是咱們的tag組件，接下來咱們把它發佈到npm上，效果以下：

此時咱們就能夠用npm install的方式安裝咱們的組件並使用了。java

實現

首先我是基於create-react-app來打包咱們的UI庫的，由於比較方便簡單，固然咱們也可使用本身搭建的webpack來實現這一過程。node

1.經過create-react-app快速啓動一個項目：

npx create-react-app alex_xu
cd alex_xu
npm start
複製代碼

2.設計組件庫目錄結構

咱們在create-react-app建立的項目下的src目錄下新建components用來存放咱們的組件,用app.js要導入咱們的組件來測試效果,咱們會把打包後的組件目錄放在lib下,目錄大體以下:react

3.配置package.json文件

package.json主要用來設置組件庫的信息及打包腳本,就比如咱們用vue/react腳手架搭建項目同樣,你們應該都很熟悉了:webpack

{
  "name": "@alex_xu/ui",
  "version": "0.0.1",
  "description": "A Design UI library for React",
  "main": "lib/index.js",
  "module": "es/index.js",
  "author": "alex_xu",
  "private": false,
  "license": "MIT",
  "publishConfig": {
    "registry": "你的npm倉庫地址"
  },
  "repository": {
    "type": "git",
    "url": "git+你的git倉庫地址"
  },
  "bugs": {
    "url": "issues地址"
  },
  "files": [
    "es",
    "lib"
  ],
  "homepage": "組件庫的主頁",
  "keywords": [
    "react",
    "components",
    "ui",
    "framework",
    "frontend"
  ],
  "peerDependencies": {
    "react": ">=16.5.0",
    "react-dom": ">=16.5.0"
  },
  "scripts": {
    "start": "node scripts/start.js",
    "build": "node scripts/build.js",
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@babel/cli": "^7.6.4",
    "@babel/core": "^7.6.4",
    "@babel/plugin-syntax-dynamic-import": "^7.2.0",
    "@babel/preset-env": "^7.6.3",
    "@babel/preset-react": "^7.6.3",
    "babel-plugin-import": "^1.12.2"
  },
  // ...
}

複製代碼

這裏的script配置只是運行時配置,打包的時候咱們會寫單獨的配置腳本去執行打包,而後打包jsx語法咱們須要手動配置babel,因此咱們會安裝babel插件,babel配置以下:css3

const presets = [
    [
        "@babel/preset-env",   // 將ES6語法轉換爲es5
        {
            "useBuiltIns": "usage",    // 只編譯須要編譯的代碼
            "corejs": "3.0.1",
        }
    ],
      "@babel/preset-react"
];

const plugins = [
    "@babel/plugin-syntax-dynamic-import",
    ["import", { "libraryName": "antd", "style": true }]
]

module.exports = { presets, plugins }
複製代碼

接下來安裝babel模塊:git

npm i @babel/cli @babel/core @babel/preset-env @babel/preset-react -D
複製代碼

這裏爲了設置兼容多平臺的環境變量,咱們還須要用到cross-env, 拷貝css須要cpx,

npm i cross-env cpx -D
複製代碼

須要安裝的插件已經完成,如今能夠寫打包組件的shell腳本了(建議在在根目錄下建立):

cross-env BABEL_OUTPUT=commonjs babel src/components --out-dir lib/
babel src/components --out-dir es/
# 拷貝css
cpx \"src/components/**/*.css\" es"
cpx \"src/components/**/*.css\" lib"
複製代碼

接下來咱們繼續咱們的組件庫發佈.

4.發佈組件庫

首先假定咱們在components下寫好了第一個組件Tag,咱們在components的index.js統一導出:

export { default as Tag } from './Tag';
// ...
複製代碼

而後執行咱們的shell腳本:

bash build.sh
複製代碼

執行完能夠發如今根目錄下多了lib和es的目錄,裏面即便咱們打包後的組件,一種遵循es規範,一種遵循cjs規範.

發佈:

npm publish --access public
複製代碼

--access是設置npm的訪問級別,有public|restricted, restricted是限制訪問,若是要發開源包,通常設置爲public.

最後

完整配置文件我已經發布到github，若是想了解更多webpack，gulp，css3，javascript，nodeJS，canvas等前端知識和實戰，歡迎在公衆號《趣談前端》加入咱們一塊兒學習討論，共同探索前端的邊界。