当学习成为习惯，知识就成为常识。感谢您的点赞、收藏和评论。有新视频和文章会第一时间发到微信公众号。欢迎关注：李永宁lyn的文章已被github收录。欢迎收看星空。从实现项目的基本结构->支持多标准打包->实现按需加载->发布npm包，带你从0到1搭建一个组件库。构建项目初始化项目目录mkdirlyn-comp-lib&&cdlyn-comp-lib&&npminit-y新建packages目录packages目录是一个组件目录，一个组件文件夹是一个单元，一个文件夹是一个componentmkdirpackagesnew/src/index.js/src/index.js作为commonjs规范的打包入口mkdirsrc&&cdsrc&&touchindex.js新建一个webpack.common.jscommonjs规范webpack配置文件common.js新建webpack.umd.jsumd规范webpack配置文件touchwebpack.umd.js新建publish.sh负责构建项目和发布npm包touchpublish.sh安装webpack,webpack-clinpmiwebpackwebpack-cli-D项目目录结构并开始编码。目前只是为了验证架构设计，所以我只会写一些简单的demo组件，并在packages目录下新建两个目录作为组件目录。这个目录结构其实是指element-ui组件库为按需加载做准备的/packages/hello/src/index.html。js//hellofunctionexportdefaultfunctionhello(msg){console.log('hello',msg)}/packages/log/src/index.js//logfunctionexportdefaultfunctionlog(str){console.log('log:',str)}导入导出组件在/src/index.js中，统一导入项目中的组件并导出//当组件变大时，可以自动生成这部分，element-ui自动导入从'../packages/hello/src/index'导入日志的方式打招呼'../packages/log/src/index'exportdefault{hello,log}写webpack配置文件/webpack.common.jsconstpath=require('path')module.exports={entry:'./src/index.js',//使用开发者模式，目的是为了调试一段时间。实际开发中可以改为生产模式：'development',output:{path:path.join(__dirname,'./lib'),filename:'lyn-comp-lib.common.js',//commonjs2规范libraryTarget:'commonjs2',//把bundle中的window对象替换成this，否则会报windowisnotdefinedglobalObject:'this',//没有这个配置项，组件会挂载到default属性下，需要这样使用comp.default.xxx，不方便libraryExport:'default'}}/webpack.umd.jsconstpath=require('path')module.exports={//这部分在实际开发中可以自动开发以element-ui方式生成//按需加载需要配置入口为多入口模式，一个入口一个组件入口:{log:'./packages/log/src/index.js'，你好：'。/packages/hello/src/index.js'},mode:'development',output:{path:path.join(__dirname,'./lib'),filename:'[name].js',//umd规范库target:'umd',globalObject:'this',//组件库暴露的全局变量，例如通过脚本导入bundle时可以使用library:'lyn-comp-lib',libraryExport:'default'}}package.json{"name":"@liyongning/lyn-comp-lib","version":"1.0.0","description":"从0到1构建组件库","main":"lib/lyn-comp-lib.common.js","scripts":{"build:commonjs2":"webpack--configwebpack.common.js","build:umd":"webpack--configwebpack.umd.js","build":"npmrunbuild:commonjs2&&npmrunbuild:umd"},"keywords":["组件库","0to1"],"author":"李永宁","文件":["lib","package.json"],"repository":{"type":"git","url":"https://github.com/liyongning/lyn-comp-lib.git"},...}说明name在包名前加上自己的npm账号名，使用npmscope，整理包目录的方法不同于普通包，可以有效避免与其他包名冲突，main告诉程序（importhellofrom'@liyongning/lyn-comp-lib'）在发布的时候从哪里加载组件库脚本构建命令文件npmpackage告诉发布程序只上传files中指定的文件和目录到npmserverrepository代码仓库的地址，该选项不是必须的，但一般都会提供。共享构建发布脚本publish.shshell脚本与others，负责构建组件库，发布组件库到npm#!/bin/bashecho'开始构建组件库'npmrunbuildecho'组件库构建完成，现在发布'npmpublish--accesspublicREADME.md文件那是本质l对于一个项目，readme.md，负责告诉Others，如何使用我们的组件库来构建和发布到这里，不出意外，一开始设定的目标即将完成，然后执行脚本，构建并发布组件库，当然在发布之前要有自己的npm账号shpublish.sh在脚本执行过程中没有报错，最后出现如下内容，说明npm包发布成功，也可以去npm官网查看...npmnoticetotalfiles:5npmnotice+@liyongning/lyn-comp-lib@1.0.0测试接下来我们新建一个测试项目来实际使用刚刚发布的组件库来验证是否可用，是否达到我们预期的目标新建一个项目初始化项目目录mkdirtest&&cdtest&&npminit-y&&npmiwebpackwebpack-cli-D&&npmi@liyongning/lyn-comp-lib-S查看日志或包。json会发现组件库已经安装成功，接下来使用new/src/index.jsimport{hello}from'@liyongning/lyn-comp-lib'console.log(hello('lyncomplib'))构建npxwebpack-cli--modedevelopment会在/dist目录下生成打包文件mian.js，然后在/dist目录下新建index.html文件并导入main.js，然后打开在浏览器中，打开控制台，可以看到输出如下内容：是否按需加载我们只在/src/index.js中引入并使用了hello方法，在main中搜索了hello函数和log函数。js，发现两个都能找到，说明现在完全导入了，然后根据使用文档（README.md）配置按需加载，从这张图也可以看出，导入的是一个commonjspackageinsteadof"./node_modules/@liyongning/lyn-comp-lib/lib/hello.js根据Componentlibraryusagedocumentationconfguration按需加载installbabel-plugin-componentinstallbabel-loader,@babel/corenpminstall--save-devbabel-loader@babel/core//webpack.config.jsconstpath=require('path')module.exports={entry:'./src/index.js',mode:'development',output:{path:path.resolve(__dirname,'./dist'),filename:'main.js'},模块：{rules:[{test:/\.js$/,exclude:/node_modules/,loader:'babel-loader'}]}}install@babel/preset-env{"presets":["@babel/preset-env"],"plugins":[["component",{"libraryName":"@liyongning/lyn-comp-lib","style":false}]]}配置package.jsonscript{...scripts:{"build":"webpack--configwebpack.config.js"}...}*执行构建命令npmrunbuild*重复上面的第4步，会发现打包后的文件只有`hellofunction`，没有`logfunction`而且实际包体积也小了**OK，目标完成！！有问题欢迎提问，共同进步**##链接*【组件库专栏】(https://mp.weixin.qq.com/mp/appmsgalbum?__biz=MzA3NTk4NjQ1OQ==&action=getalbum&album_id=2259813235891863559#wechat_redirect)-[github](https://github.com/liyongning/lyn-comp-lib.git)感谢您：**赞**，**收藏**和**评论**，下次见---**当学习成为习惯，知识成为常识。**感谢您的**点赞**，**收藏**和**交流耳鼻喉科**。有新视频和文章会第一时间发到微信公众号。收录于[github](https://github.com/liyongning/blog)，欢迎关注和Star。
