标签：add 技术 导入 -name res build word package license
注意：需要进入邮箱验证
$ mkdir zqh-test
$ cd zqh-test
zqh-test> npm init
注意：在生成package.json中，name的名称和项目的名称保持一至
{
"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"
}
console.info(‘hello world‘);
├── zqh-test
│ ├── index.js
└── └── package.json
zqh-test> npm addUser
如果已经注册过账号，直接登录就行了
zqh-test> npm login
输入用户名、密码、邮箱
zqh-test> npm publish
发布完成后，在自己的package里，会看到对应的包
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
zqh-test> npm --force unpublish zqh-test
注意：超过24小时就不能删除了
zqh-test> npm deprecate --force zqh-test@1.0.0 "这个包不在维护了。"
zqh-test> npm publish
zqh-test> npm install zqh-test -D
├── zqh-test2
│ ├── index.js
│ ├── package.json
└── └── readme.md
;(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);
zqh-test> npm install zqh-test2 -D
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
zqh-test> npm install zqh-test4 -D
import MyPlugin from ‘zqh-test4‘
console.log(MyPlugin(‘hello my plugin.‘))
let MyPlugin = require(‘zqh-test4‘);
console.log(MyPlugin(‘hello plugin.‘))
"repository": {
"type": "git",
"url": "https://github.com/xxx/zqh_test2.git"
},
需要使用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
{
"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
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‘
}
}
module.exports = {
foo() {
console.log(‘foo‘);
},
bar() {
console.log(‘bar‘)
}
}
使用webpack打包
zqh-test> webpack
zqh-test> npm login
zqh-test> npm publish
zqh-test> npm install zqh-test4 -D
main.js
import {foo} from ‘zqh-test4‘
foo(); // foo
参考链接：
标签：add 技术 导入 -name res build word package license
原文地址：https://www.cnblogs.com/zzsdream/p/13403163.html
