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