webpack打包library发布到npm

举报
彭世瑜 发表于 2022/05/17 23:50:37 2022/05/17
【摘要】 webpack打包library发布到npm 项目结构 $ tree . ├── package.json ├── src │ └── index.js └── webpack.config.js...

webpack打包library发布到npm

项目结构

$ tree
.
├── package.json
├── src
│   └── index.js
└── webpack.config.js

  
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

入口文件 index.js

// src/index.js
export function echo(message) {
  console.log(message);
}


  
 
  • 1
  • 2
  • 3
  • 4
  • 5

依赖配置 package.json

{
  "name": "more-echo",
  "version": "1.0.0",
  "description": "a demo for webpack package to npm",
  "main": "dist/more-echo.js",
  "scripts": {
    "build": "webpack"
  },
  "keywords": [
    "demo"
  ],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^5.72.1",
    "webpack-cli": "^4.9.2"
  }
}

  
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18

配置文件 webpack.config.js

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'more-echo.js',
    library: {
      name: 'moreEcho',
      type: 'umd',
    },
  },
};


  
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14

参考 https://webpack.docschina.org/guides/author-libraries/

打包发布

# 打包
$ npm run build

# 发布
$ npm publish

  
 
  • 1
  • 2
  • 3
  • 4
  • 5

npm地址:https://www.npmjs.com/package/more-echo

Node环境中使用

npm i more-echo

  
 
  • 1

示例

const { echo } = require('more-echo');

echo('Hello World!');

  
 
  • 1
  • 2
  • 3

浏览器中使用

<script src="./dist/more-echo.js"></script>

<script>
    moreEcho.echo('Hello World');
</script>

  
 
  • 1
  • 2
  • 3
  • 4
  • 5

文章来源: pengshiyu.blog.csdn.net,作者:彭世瑜,版权归原作者所有,如需转载,请联系作者。

原文链接:pengshiyu.blog.csdn.net/article/details/124809804

【版权声明】本文为华为云社区用户转载文章,如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。