写一个npm包
/一、注册 npm 账号
- 怎么将代码提到 github,大家都知道需要一个 github 账号
- 同样,开发一个 npm 包,当然也需要一个 npm 账号,将 npm 包发布到 npm 的托管服务器
- 注册地址:http://npmjs.org
二、开发 npm 包
1.目录构建
- npm init
- 项目结构:
.
├── build // 打包配置文件
├── dist // 打包后文件
├── src // 源代码
├── README.md //说明文档
├── package.json //包信息
└── test //测试用例
2.开发模块
- 入口 src/index.js 模块
非全局安装(npm install xxx),则所有的函数接口都通过 index.js 暴露给外部调用
const getDevice = require("./get/getDevice");
module.exports = {
getDevice,
};
- src/get/getDevice.js 模块
function getDevice() {
var userAgent =
("navigator" in window &&
"userAgent" in navigator &&
navigator.userAgent.toLowerCase()) ||
"";
var vendor =
("navigator" in window &&
"vendor" in navigator &&
navigator.vendor.toLowerCase()) ||
"";
var appVersion =
("navigator" in window &&
"appVersion" in navigator &&
navigator.appVersion.toLowerCase()) ||
"";
if (/mac/i.test(appVersion)) return "MacOSX";
if (/win/i.test(appVersion)) return "windows";
if (/linux/i.test(appVersion)) return "linux";
if (
/iphone/i.test(userAgent) ||
/ipad/i.test(userAgent) ||
/ipod/i.test(userAgent)
)
"ios";
if (/android/i.test(userAgent)) return "android";
if (/win/i.test(appVersion) && /phone/i.test(userAgent))
return "windowsPhone";
}
module.exports = getDevice;
3.配置全局命令
build 目录下写 webpack 配置代码
- build.js
const path = require("path");
const fs = require("fs");
const ora = require("ora"); // 命令行环境的 loading效果
const rm = require("rimraf"); // 用于统一rm
const copy = require("copy");
const chalk = require("chalk"); // 打印提示语
const webpack = require("webpack");
const config = require("./webpack.conf");
const pkg = require("../package.json");
const rootPath = path.resolve(__dirname, "../");
new Promise((resolve, reject) => {
// 构建全量压缩包
let building = ora("building...");
building.start();
rm(path.resolve(rootPath, "min", `*.js`), (err) => {
if (err) throw err;
webpack(config, function (err, stats) {
if (err) throw err;
building.stop();
process.stdout.write(
stats.toString({
colors: true,
modules: true,
children: false,
chunks: false,
chunkModules: false,
}) + "\n\n"
);
resolve();
console.log(chalk.cyan(" Build complete.\n"));
});
});
})
.then(() => {
// 替换模块文件
let copying = ora("copying...");
copying.start();
rm("*.js", (err) => {
if (err) throw err;
let folderList = fs.readdirSync(path.resolve(rootPath, "src"));
folderList.forEach((item, index) => {
copy(`src/${item}/*.js`, rootPath + "/dist", function (err, files) {
if (err) throw err;
if (index === folderList.length - 1) {
copying.stop();
console.log(chalk.cyan(" Copy complete.\n"));
}
});
});
});
})
.catch((err) => {
throw err;
});
- webpack.conf.js
const webpack = require("webpack");
const path = require("path");
const UglifyJsPlugin = require("uglifyjs-webpack-plugin"); // 压缩代码
const pkg = require("../package.json");
const rootPath = path.resolve(__dirname, "../");
const config = {
entry: path.resolve(rootPath, "src", "index.js"),
output: {
filename: `${pkg.name}.min.js`,
path: path.resolve(rootPath, "min"),
library: `${pkg.name}`,
libraryTarget: "umd",
},
module: {
rules: [
{
test: /\.js$/,
loader: "babel-loader",
},
],
},
plugins: [new UglifyJsPlugin()],
};
module.exports = config;
三、发布 npm 包
1.npm login 登录 npm 帐号
npm login
2.npm run build 编译代码
npm run build
3.npm publish 发布
npm publish
四、常用命令
查看npm命令:
$ npm help
初始化
一个基于node的项目,会创建一个配置文件package.json(两种方式):
//1.一般情况下 一路enter
$ npm init
//2.全部使用默认配置
$ npm init --yes
安装模块(包):
//全局安装
$ npm install 模块名 -g
//本地安装
$ npm install 模块名
//一次性安装多个
$ npm install 模块1 模块2 模块n --save
//安装运行时依赖包
$ npm install 模块名 --save
//安装开发时依赖包
$ npm install 模块名 --save-dev
查看安装目录:
//查看本地安装的目录
$ npm root
//查看全局安装的目录
$ npm root -g
卸载模块(包):
//卸载本地模块
$ npm uninstall 模块名
//卸载全局模块
$ npm uninstall -g 模块名
更新模块(包)
$ npm update 模块名
$ npm update 模块名 -g
查看当前安装的模块(包)
$ npm ls
$ npm ls -g
查看模块(包)的信息:
$ npm info 模块名
五、常见问题
1. npm publish 出错
npm ERR! publish Failed PUT 403
npm ERR! Darwin 16.0.0
npm ERR! argv "/usr/local/Cellar/node/5.6.0/bin/node" "/usr/local/bin/npm" "publish"
npm ERR! node v5.6.0
npm ERR! npm v3.10.3
npm ERR! code E403
npm ERR! "You cannot publish over the previously published version 0.0.43." : npm-develop
npm ERR!
npm ERR! If you need help, you may report this error at:
npm ERR! <https://github.com/npm/npm/issues>
npm ERR! Please include the following file with any support request:
npm ERR! /Volumes/work/private/github/npm-develop/npm-debug.log
没有更新 package.json 的版本号,每次的版本号必须大于上次,否则无法 publish
全文完。