前言
之前做了一个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
然后就会收到邮件,你的包已经发布成功。
风云阁资源网 Design By www.bgabc.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
风云阁资源网 Design By www.bgabc.com
暂无评论...
更新日志
2024年09月20日
2024年09月20日
- 《粤语超白金 百听不厌的经典金曲 2CD》[WAV/分轨][1.3GB]
- 群星.1994-全世界精丫华星】【WAV+CUE】
- 杜德伟.1997-知.解2CD【滚石】【WAV+CUE】
- 群星.2022-一不小心喵上你原声大碟【TME影音】【FLAC分轨】
- 《战锤40K星际战士2》卡在正在加入服务器解决方法
- 《勇者斗恶龙怪物仙境3》玩法内容介绍
- 《幸福工厂》无限报错解决方法
- 交错战线原始交易所推荐角色一览
- 战锤40K星际战士2战术职业介绍|战术职业技能效果一览
- 战锤40K星际战士2突击职业介绍|突击职业技能效果一览
- [妙音金曲]群星《悲情咖啡屋》(黑胶)2CD[DTS-WAV]
- 阿兰·达瓦卓玛《A-Lan阿兰唯美歌姬》2CD[DTS-WAV]
- 【小提琴】陈立新《思乡曲》2004[FLAC+CUE]
- 《战地》新作明年初大规模测试!EA已内部测试一年
- 《GTAOL》PC版时隔多年更新反作弊!小助手宣布跑路