使用webpack和rollup打包组件库的方法

站长资源 2024/11/24 佚名

2 0 1

前言

之前做了一个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: [MiniCssExtractPlugin.loader, 'css-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 'rollup-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.cjs',
   format: "cjs",
   globals: {
    react: 'React',
   },
  },
 ],
 external: ['react'],
 plugins: [
  postcss(
   { extensions: ['.css'] }
  ),
  babel({
   exclude: "node_modules/**",
   runtimeHelpers: true,
  }),
  commonjs(),
  resolve(),
 ],
}

发包到npm

发包到npm只需要几个命令。

npm pack

对项目打包后，命令行输出压缩包的详细信息。

更新版本

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

根据本次改动的大小选择不同的命令。

最后使用发布命令。

npm publish

然后就会收到邮件，你的包已经发布成功。

webpack,打包组件库,webpack,打包组件,rollup打包组件库

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

评论“使用webpack和rollup打包组件库的方法”

暂无评论...

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒经典版》的玩家都可以获得奖励。

更新日志

2024年11月24日