webpack打包library发布到npm

webpack打包library发布到npm

项目结构

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

入口文件 index.js

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

依赖配置 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"}
}

配置文件 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',},},
};

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

打包发布

# 打包
$ npm run build# 发布
$ npm publish

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

Node环境中使用

npm i more-echo

示例

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

浏览器中使用

<script src="./dist/more-echo.js">script><script>moreEcho.echo('Hello World');
script>

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！