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

 更新时间:2021年02月25日 11:23:19   作者:不作声  
这篇文章主要介绍了使用webpack和rollup打包组件库的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

前言

之前做了一个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?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 '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和rollup打包组件库的方法的文章就介绍到这了,更多相关webpack和rollup打包组件库内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • javascript Blob对象实现文件下载

    javascript Blob对象实现文件下载

    这篇文章主要为大家介绍了vue组件通信的几种方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助
    2021-12-12
  • 不同js异步函数同步的实现方法

    不同js异步函数同步的实现方法

    下面小编就为大家带来一篇不同js异步函数同步的实现方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-05-05
  • 微信小程序开发之自定义tabBar的实现

    微信小程序开发之自定义tabBar的实现

    这篇文章主要介绍了微信小程序开发之自定义tabBar的实现,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-09-09
  • JavaScript中重名的函数与对象示例详析

    JavaScript中重名的函数与对象示例详析

    最近同事问了一个问题,说在js中如果函数与对象重名了会怎么样?仔细详细这个问题值得讨论一下,所以便有了这篇文章,这篇文章主要给大家介绍了关于JavaScript中重名的函数与对象的相关资料,需要的朋友可以参考借鉴,下面来一起看看吧啊。
    2017-09-09
  • JavaScript 语言精粹学习笔记

    JavaScript 语言精粹学习笔记

    JavaScript建立在一些非常好的想法和少数非常坏的想法之上。
    2009-08-08
  • Javascript 判断函数类型完美解决方案

    Javascript 判断函数类型完美解决方案

    在判断函数类型时,我们通常使用typeof方法,一般情况下,它会得到我们所预想的效果。
    2009-09-09
  • ES6新特性之Symbol类型用法分析

    ES6新特性之Symbol类型用法分析

    这篇文章主要介绍了ES6新特性之Symbol类型用法,结合形式分析了Symbol类型的功能、使用方法及相关注意事项,需要的朋友可以参考下
    2017-03-03
  • JS模板编译的实现详情

    JS模板编译的实现详情

    这篇文章主要介绍了JS模板编译的实现详情,编译是一种格式变成另一种格式的过程。编译会导致好的结果,比如书写简单的代码,编译出来复杂的代码;或者提高代码的使用性能
    2022-07-07
  • JS实现弹出下载对话框及常见文件类型的下载

    JS实现弹出下载对话框及常见文件类型的下载

    JS要实现下载功能,一般都是这么几个过程:生成下载的URL,动态创建一个A标签,并将其href指向生成的URL,然后触发A标签的单击事件,这样就会弹出下载对话框,从而实现了一个下载的功能
    2017-07-07
  • js计算时间差代码【包括计算,天,时,分,秒】

    js计算时间差代码【包括计算,天,时,分,秒】

    下面小编就为大家带来一篇js计算时间差代码【包括计算,天,时,分,秒】。小编觉得挺不错的,现在分享给大家,也给大家做个参考
    2016-04-04

最新评论