欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

webpack创建library及从零开始发布一个npm包

程序员文章站 2022-07-02 13:49:44
最近公司有个需求,我们部门开发一个平台项目之后,其他兄弟部门开发出的插件我们可以拿来直接用,并且不需要我们再进行打包,只是做静态的文件引入,研究一波后发现,webpack创建library可以实现。 创建library + "完整代码" + 核心代码为 + 打包出来后我们会得到一个testPlugi ......

最近公司有个需求,我们部门开发一个平台项目之后,其他兄弟部门开发出的插件我们可以拿来直接用,并且不需要我们再进行打包,只是做静态的文件引入,研究一波后发现,webpack创建library可以实现。

创建library

    output: {
        path: dist_path,
        publicpath: "",
        chunkfilename: "[name].js",
        filename: "testplugin.js",
        librarytarget: 'umd',//将你的 library 暴露为所有的模块定义下都可运行的方式
        library: 'testplugin'
    },
  • 打包出来后我们会得到一个testplugin.js,这就是我们自己的三方库。

    平台项目中使用

  • 项目中设置externals,目的是使自己项目不会重复打包引入的库
    externals: {
        testplugin:"testplugin",
    },
  • 项目引入
<!--index.html-->
<script src="testplugin.js"></script>
//index.js
import testplugin from 'testplugin';
console.log(testplugin);
  • 项目打包好
  • 将testplugin库丢入打包好的dist中
  • 会发现平台项目已经成功引入库
  • 这样会发现只有打包好dist再丢入库才可以看到效果,平时开发环境下怎么办呢,可以使用copy-webpack-plugin,及将静态的文件夹自动拷贝到dist
const copywebpackplugin = require('copy-webpack-plugin');

    plugins: [
        new copywebpackplugin([{
            from:__dirname+'/src/static',//打包的静态资源目录地址
            to:'./static' //打包到dist下面的static
        }]),
    ...
    ]
  • 然后只需要改改index.html的引入地址
<script src="static/plugin/testplugin/testplugin.js"></script>

发布npm包

上面的方法的优点是:如果兄弟部门的三方库变了,只需要他们把打包好的库文件给我们,我们丢进去替换掉以前的就可以了,我们自己并不需要重新打包。

那发布npm包呢?自己没事又摸索了一波,并成功发布了一个可以对文本插入表情的react小插件。

发布准备

  • 自己的项目
  • 去npm官网,注册账号。
  • 给自己的npm包想个名字,并通过搜索验证是否没有被占用

    改写项目webpack配置

  • 核心,同上面的创建library一样
  • 生产环境配置webpack.config.prod.js
//webpack.config.prod.js  
    entry: {
        component: ['./src/component/expression/expression.js']
    },
    output: {
        path: dist_path,
        filename: '[name].js',
        publicpath: "/dist/",
        librarytarget: 'umd',
        library: 'expression'
    },
    externals: {
        'react': 'react',//因为引入的肯定是react项目,所以不需要再将react打包进npm包
        'react-dom': 'react-dom'
    },
  • 开发环境配置webpack.config.dev.js
//webpack.config.dev.js
    entry: {
        app: ['./src/index.js'],
        component: ['./src/component/expression/expression.js']
    },
  • 这样设置之后打包出来只有一个component.js,所以需要修改package的main
  • 修改package.json
  "main": "dist/component.js",
  • package的其他设置
    • 另外package里面的name就是你包的名字
    • version是版本号
    • main是入口文件
    • description是描述
    • repository是线上git地址
    • keywords是关键字,比较重要,别人可以通过这个搜索到你的包
    • author是作者

      做完这些就可以发布了

  • npm login
    • 会让你输入账号,密码,邮箱,然后就登陆了
  • 登录成功会出现以下提示信息:logged in as simbawu on https://registry.npmjs.org/.
    • 注意:如果不是这个,而是我们的其他镜像比如淘宝的,需要先切换回来,否则提交不起npm config set registry https://registry.npmjs.org/,然后再次npm login。
  • npm publish发布
    • 若出现包名和版本号则发布成功
      webpack创建library及从零开始发布一个npm包

自己发布的react小插件

最后

大家好,这里是「 taoland 」,这个博客主要用于记录一个菜鸟程序猿的growth之路。这也是自己第一次做博客,希望和大家多多交流,一起成长!文章将会在下列地址同步更新……
个人博客:
小程序:taoland