npm创建自己的包
一、一个简单的创建
1、创建npm账号
注意:需要进入邮箱验证
2、创建目录及初始化
$ mkdir zqh-test
$ cd zqh-test
zqh-test> npm init
3、文件内容及目录结构
注意:在生成package.json中,name的名称和项目的名称保持一至
- package.json
{
"name": "zqh-test", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "zqh-test": "echo \"Error: no test specified\" && exit 1" }, "author": "zhangqh22", "license": "ISC" }
- 入口文件编写,index.js,加一句简单的打印
console.info('hello world');
- 最终目录结构
├── zqh-test
│ ├── index.js
└── └── package.json
4、发布
- 项目根目录下,运行npm addUser命令,添加自己的用户信息
zqh-test> npm addUser
如果已经注册过账号,直接登录就行了
zqh-test> npm login
输入用户名、密码、邮箱
- 发布
zqh-test> npm publish
发布完成后,在自己的package里,会看到对应的包
5、下载调用
- 下载
zqh-test> npm install zqh-test -D
package.json
"devDependencies": {
"zqh-test": "^1.0.0"
}
- 使用
index.js
require('zqh-test');
- 控制台执行
zqh-test> node index.js
输出:hello world
6、删除发布的包
zqh-test> npm --force unpublish zqh-test
注意:超过24小时就不能删除了
7、废弃包(这个包并不会删除,只是在别人下载使用的时候会提示)
zqh-test> npm deprecate --force [email protected] "这个包不在维护了。"
7、更新包
- 先把package.json里的version版本号修改了,再执行publish命令就行了
zqh-test> npm publish
- 更新(重新下载)
zqh-test> npm install zqh-test -D
二、require/import导入及使用说明
1、目录结构
├── zqh-test2
│ ├── index.js
│ ├── package.json
└── └── readme.md
2、index.js(兼容AMD和CMD的写法)
;(function(global) { "use strict"; var MyPlugin = function(opts) { console.log(opts); }; MyPlugin.prototype = { init: function() { console.log('init'); } }; if (typeof module !== 'undefined' && module.exports) { module.exports = MyPlugin; } else if (typeof define === 'function') { define(function() { return MyPlugin; }); } global.MyPlugin = MyPlugin; })(this);
3、readme.md(插件说明)
4、下载使用
- 下载
zqh-test> npm install zqh-test2 -D
- 在index.js中引入使用
var MyPlugin = require('zqh-test2'); MyPlugin({ name: 'MyPlugin', version: '1.0.1' }); MyPlugin.prototype.init();
运行命令
zqh-test> node index.js
结果:
{ name: 'MyPlugin', version: '1.0.1' } init
- 在vue项目main.js中,引入使用
zqh-test> npm install zqh-test4 -D
- import方式
import MyPlugin from 'zqh-test4'
console.log(MyPlugin('hello my plugin.'))
- require方式
let MyPlugin = require('zqh-test4'); console.log(MyPlugin('hello plugin.'))
5、加git仓库链接
- 添加repository
"repository": {
"type": "git",
"url": "https://github.com/xxx/zqh_test2.git"
},
- 发布后,就可以在包中查看git仓库了
6、使用webpack打包
需要使用webpack对组件或者模块进行打包,因为可复用库的模块化,需要适合在任何场景中进行引用,比如AMD/CMD、CommonJs、ES6、ES5等环境。从webpack打包之后的头文件来看:
(function webpackUniversalModuleDefinition(root, factory) { if (typeof exports === 'object' && typeof module === 'object') module.exports = factory(); // node else if (typeof define === 'function' && define.amd) define([], factory); // AMD/CMD else if (typeof exports === 'object') exports["Url"] = factory(); else root["Url"] = factory(); })(this, function () { // somecode }
从代码可以看出,webpack打包出来的文件是支持多场景的引用方式的。
下面我们只需要在webpack.config.js里添加libraryTarget配置,设为umd模式
output: {
libraryTarget: "umd"
}
目录结构:
├── zqh-test4
│ ├── build
│ ├── ├── main.min.js
│ ├── index.js
│ ├── package.json
└── └── webpack.config.js
- package.json
{
"name": "zqh-test4", "version": "1.0.4", "description": "", "main": "./build/main.min.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "zhangqh22", "license": "ISC", "devDependencies": { "webpack": "^3.1.0" } }
main是最终引入的文件
- 初始化安装
zqh-test> npm install
- webpack.config.js指定umd模式
const webpack = require('webpack') const path = require('path') module.exports = { entry: ['./index.js'], output: { path: path.resolve(__dirname, './build'), filename: '[name].min.js', libraryTarget: 'umd' } }
- index.js
module.exports = {
foo() { console.log('foo'); }, bar() { console.log('bar') } }
使用webpack打包
zqh-test> webpack
- 重新发布
zqh-test> npm login
zqh-test> npm publish
- 在vue项目中安装使用
zqh-test> npm install zqh-test4 -D
main.js
import {foo} from 'zqh-test4' foo(); // foo
参考链接:
作者:webStyle_虎_
链接:https://www.jianshu.com/p/f33a919443ed
来源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。