前言

之前做了一個loading的樣式元件，為了實現程式碼的可重用性，將這個小專案打包並且釋出在了npm上。在一次次的打包發包過程中經歷了一個有一個報錯，@buzuosheng/loading這個元件已經到了2.7.0版本，雖然還有一些要調整的地方，但總算是可以用了。

webpack和rollup對比

webpack算是使用程式設計師使用最多的打包工具，面試中往往會問到webpack的相關問題，而rollup被問到的要少很多。導致這種現象的一個原因是，應用開發使用webpack，庫開發使用rollup的說法。

但是兩個打包工具都有很強大的外掛開發功能，功能差異越來越模糊，但是rollup使用起來更加簡潔，而且能打出能小體積的檔案。但當我們做前端應用時，效能分析往往要求更小的庫，所以rollup更符合開發庫的要求。

這次算是一個打包的實驗，我們使用兩個工具都對這個專案打一次包。

使用webpack打包

在打包之前，需要給package.json檔案中新增或更改一些欄位。

{
 // 程式主入口模組，使用者引用的就是該模組的匯出
 "main": "dist/bundle.js",// 專案包含的檔案
 "files": [
  "src","dist"
 ],// 將react和react-dom移動到該配置中，相容依賴
 "peerDependencies": {
  "react": "^17.0.1","react-dom": "^17.0.1"
 },}

webpack打包需要用到很多庫來處理不同的檔案，這個專案比較小，就只用了兩個庫。

// webpack.config.js
const path = require('path');
const MinicssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
 mode: 'production',entry: './src/Loading.jsx',output: {
  filename: "index.js",path: path.join(__dirname,"./dist/"),libraryTarget: 'umd',},optimization: {
  minimize: false,resolve: {
  extensions: ['.jsx']
 },module: {
  rules: [
   {
    test: /\.css$/,loader: [MiniCssExtrachttp://www.cppcns.com
 
tPlugin.loader,'css-loader?modules'],{
    test: /\.(js|jsx)$/,loader: "babel-loader",exclude: /node_modules/,]
 },plugins: [
  new MiniCssExtractPlugin({
   filename: "main.min.css" // 提取後的css的檔名
  })
 ],}

本來應該寫開發和生產兩個環境下的配置，但在這裡只寫了production環境下的配置。

使用rollup打包

在rollup中使用的庫比較多一點。

// rollup.config.js
// 解決rollup無法識別commonjs的問題
import commonjs from 'rollup-plugin-commonjs'
// babel處理es6程式碼的轉換
import babel from 'rollup-plugin-babel'
// resolve將我們編寫的原始碼與依賴的第三方庫進行合併
import resolve from 'rolluUaLPop-plugin-node-resolve'
// postcss處理css檔案
import postcss from 'rollup-plugin-postcss'

export default {
 input: "src/Loading.jsx",// 打包一份cjs和一份程式設計客棧es的檔案
 output: [
  {
   file: "dist/loading.es.js",format: "es",globals: {
    react: 'React',{
   file: 'dist/loading.cjwww.cppcns.coms',format: "cjs",],external: ['react'],plugins: [
  postcss(
   { extensions: ['.css'] }
  ),babel({
   exclude: "node_modules/**",runtimeHelpers: true,}),commonjs(),resolve(),}

發包到npm

發包到npm只需要幾個命令。

npm pack

對專案打包後，命令列輸出壓縮包的詳細資訊。

更新版本

npm version [<newversion> | major www.cppcns.com| minor | patch | premajor | preminor | prepatch | prerelease [--preid=<prerelease-id>] | from-git]

根據本次改動的大小選擇不同的命令。

最後使用釋出命令。

npm publish

然後就會收到郵件，你的包已經發布成功。

到此這篇關於使用webpack和rollup打包元件庫的方法的文章就介紹到這了,更多相關webpack和rollup打包元件庫內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！