从搭建脚手架到在npm上发布react组件
從搭建腳手架到在npm上發布react組件
最近公司給公司里架設了私有的npm倉庫，相應地也需要一個用來發布react組件用的腳手架，在這個過程中又又又又復習了一下webpack，在這里分享下腳手架搭建的過程。
首先，我們預期的腳手架具有如下功能
- 開發組件時可以實時預覽
- 對組件各種資源進行打包(js/css/圖片等)
- 一鍵打包發布
1.創建項目
腳手架的名字暫時取react-simple-component-boilerplate。
首先創建一個新目錄用于放我們的文件:
mkdir react-simple-component-boilerplate cd react-simple-component-boilerplate使用npm命令創建一個項目
npm init接下來會提示你輸入項目的名稱、版本號、作者等，也可以一路回車，稍后修改。
這一步完成后，你的項目文件夾里應該有一個package.json文件了，這個文件保存了我們項目和組件的各種信息。
接下來創建如下的目錄結構
react-simple-component-boilerplate|-- config // webpack配置|-- demo // 開發時預覽用|-- dist // 打包結果|-- src // 源文件目錄| -- assets // 存放圖片等媒體文件| -- style // 存放樣式，項目使用的是less來編寫樣式2.安裝依賴
既然我們要發布的是react組件，那依賴里肯定少不了react。
使用npm install安裝下面的依賴
打包工具選擇的是webpack，下面是開發依賴，也需要一并安裝
"devDependencies": {// babel用于將你寫的es6+的代碼轉換到es5"@babel/cli": "^7.0.0","@babel/core": "^7.0.0","@babel/plugin-proposal-class-properties": "^7.0.0", // 用于支持class屬性"@babel/plugin-proposal-decorators": "^7.0.0", // 支持decorator"@babel/plugin-transform-modules-commonjs": "^7.0.0","@babel/plugin-transform-runtime": "^7.0.0", // 自動polyfill es5不支持的api特性"@babel/preset-env": "^7.0.0", // 根據目標環境來按需轉碼"@babel/preset-react": "^7.0.0", // 讓babel支持react語法"babel-loader": "^8.0.0","css-loader": "^1.0.0","file-loader": "^2.0.0","html-loader": "^0.4.4","less-loader": "^4.1.0", // 使用less來編寫樣式"mini-css-extract-plugin": "^0.5.0", // 將css提取成一個單獨的文件"style-loader": "^0.23.0","webpack": "^4.26.0","webpack-cli": "^3.1.2", // webpack4之后需要額外安裝webpack-cli"webpack-dev-server": "^3.1.14", // 開發時預覽組件所用的服務，在文件變化時會自動刷新頁面"webpack-merge": "^4.1.4" // 用于合并webpack配置},3.編寫組件
在/src目錄下新建一個index.js，這就是我們組件的入口文件了。
如果項目中要使用圖片、css等，分類放到assets、style文件夾下就好。
下面我們就在index.js中寫一個簡單的組件
/* src/index.js */import React from 'react'; import './style/style.less'; // 使用less的情況 import testPng from './assets/test.png'; // 使用圖片的情況export default class MyComponent extends Component {render(){return (<div>A new Component</div>)} }接下來，我們在/demo目錄下新建index.html和demo.js這兩個文件用于在開發組件時預覽組件效果。
index.html內容如下
在demo.js中，我們要使用一下剛剛寫的組件(位于/src/index.js)看一下效果，開發中這個demo.js文件會被打包成demo.bundle.js，就是在上面index.html中引用的js。
import React from 'react'; import ReactDom from 'react-dom'; import MyComponent from '../src/index'const Demo = () => {return <div><h1>組件預覽：</h1><MyComponent /></div> }ReactDom.render(<Demo />, document.getElementById('root'));4.配置webpack和babel
4.1 配置webpack
在/config下我們建立三個webpack配置文件
- webpack.base.js
- webpack.config.dev.js // 開發時的配置
- webpack.config.prod.js // 打包發布時的配置
由于開發和發布打包時webpack的配置有一部分是公共而且重復的，我們把這部分的配置單獨拿出來放到webpack.base.js中。
首先是公共配置webpack.base.js:
下面是開發時所用的webpack配置，寫在webpack.config.dev.js中
const path = require('path'); const merge = require('webpack-merge'); const baseConfig = require('./webpack.base.js'); // 引用公共的配置const devConfig = {entry: './demo/demo.js', // 入口文件mode: 'development', // 打包為開發模式output: {filename: 'demo.bundle.js', // 輸出的文件名稱path: path.resolve(__dirname, '../demo') // 輸出的文件目錄},devServer: { // 該字段用于配置webpack-dev-servercontentBase: path.join(__dirname, '../demo'),compress: true,port: 9000, // 端口9000open: true // 自動打開瀏覽器},module: {rules: [{ // 編譯lesstest: /\.less$/,exclude: '/node_modules/',use: [{loader: 'style-loader'}, {loader: 'css-loader'}, {loader: 'less-loader'}]},]}, }module.exports = merge(devConfig, baseConfig); // 將baseConfig和devConfig合并為一個配置需要注意的是，等會使用webpack-dev-sevrer啟動開發服務時，并不會實際在demo文件夾下生成demo.bundle.js，打包好的文件是在內存中的，但并不影響我們使用。
下面是打包發布時所用的webpack配置，寫在webpack.config.prod.js中
const path = require('path'); const merge = require('webpack-merge'); const baseConfig = require('./webpack.base.js'); const MiniCssExtractPlugin = require("mini-css-extract-plugin"); // 用于將組件的css打包成單獨的文件輸出到`dist`目錄中const devConfig = {entry: './src/index.js',mode: 'production',output: {path: path.resolve(__dirname, '../dist'),filename: 'index.js', // 輸出文件libraryTarget: 'umd', // 采用通用模塊定義, 注意webpack到4.0為止依然不提供輸出es module的方法，所以輸出的結果必須使用npm安裝到node_modules里再用，不然會報錯library: 'react-simple-component-boilerplate', // 庫名稱libraryExport: 'default', // 兼容 ES6(ES2015) 的模塊系統、CommonJS 和 AMD 模塊規范},externals: {react: {root: "React",commonjs2: "react",commonjs: "react",amd: "react"},"react-dom": {root: "ReactDOM",commonjs2: "react-dom",commonjs: "react-dom",amd: "react-dom"}},module: {rules: [{test: /\.(le|c)ss$/,use: [MiniCssExtractPlugin.loader,"css-loader",{loader: "less-loader",options: {sourceMap: false}}]}]},plugins: [new MiniCssExtractPlugin({filename: "main.min.css" // 提取后的css的文件名})], }module.exports = merge(devConfig, baseConfig);上面我們配置了externals字段，這一點非常重要。
externals定義了外部依賴。將react和react-dom添加進該字段，說明我們的組件將依賴外部的react和react-dom，這樣就可以避免把react和react-dom打包進去（不然組件會很大）
4.1 配置babel
我們需要用babel把我們的代碼編譯成es5版本。在項目根目錄新建一個.babelrc文件，輸入以下內容。
我們在presets其中使用了preset-env, 規定了輸出的代碼目標環境是份額大于0.25%的瀏覽器。另外由于我們的項目里使用了react，presets中就要加入preset-react。
同時，plugins配置了一些babel插件，用于支持裝飾器展開操作符等類內直接定義屬性等新的es特性。
4.3 配置啟動命令
我們再次回到項目根目錄下的package.json中，編輯如下
- build 命令用于打包組件
- dev 命令會使用webpack-dev-server啟動一個開發服務用于預覽組件效果
- pub 命令進行打包組件并且發布到npm上
main字段指定了我們的組件的入口文件，files字段用于指定我們的npm包的文件目錄。
5.試用和發布
要發布一個npm包，我們需使用如下命令添加一個npm的賬號，如果已經添加過的這一步可以跳過。
npm adduser如果已經有npm賬號，可以使用npm login登陸。
如果不知道自己是否已經添加過了npm賬號，使用npm whoami查看登陸信息即可
接下來就編輯package.json把組件的名稱/版本/介紹等字段都填寫一下。
好了，接下我們先使用npm run dev命令，此時會自動打開默認瀏覽器預覽組件。
如果沒什么問題的話，接下來使用npm run pub進行打包和發布。
等待發布完成后，我們就下載安裝一下。
使用自己發布的組件
import YourComponent from 'your-component'; import 'your-component/dist/main.min.css'; // 如果給組件寫了樣式，需要手動導入css文件6.總結
到這里，一個非常非常簡單的用于發布react小組件的腳手架就搭好了，總結一下其中要注意的地方:
- webpack打包時libraryTarget要使用umd
- externals 里要把外部依賴配置好
- 如果還要生成es module，可以額外使用gulp或rollup等工具
- webpack4 之后建議使用MiniCssExtractPlugin來提取css
總結
以上是生活随笔為你收集整理的从搭建脚手架到在npm上发布react组件的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： SAP 自动付款的配置
- 下一篇： JavaScript是如何工作的：使用M