发布一个npm包,webpack loader: reverse-color-loader,实现颜色反转。
初始化项目
mkdir reverse-color-loader
cd ./reverse-color-loader
npm init
新建 index.js
,手写一个 webpack loader 实现颜色反转。webpack loader 开发文档查看 编写一个 loader
module.exports = function (source) {
var newSource = source
// #000000
.replace(/#([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})([^0-9a-fA-F]{1})/g, function ($0, $1, $2, $3, $4) {
return '#' + n16_reverse_n16($1) + n16_reverse_n16($2) + n16_reverse_n16($3) + $4;
})
// #000
.replace(/#([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})([^0-9a-fA-F]{1})/g, function ($0, $1, $2, $3, $4) {
return '#' + n16_reverse_n16($1 + $1) + n16_reverse_n16($2 + $2) + n16_reverse_n16($3 + $3) + $4;
})
// rbga?(0, 0, 0, 0?)
.replace(/rgba?\s*\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,?\s*(\d*(\.\d*)?)?\s*\)/g, function ($0, $1, $2, $3, $4) {
return `rgba(${n10_reverse_n10($1)}, ${n10_reverse_n10($2)}, ${n10_reverse_n10($3)}, ${$4 || 1})`;
})
return newSource;
};
function n16_reverse_n16(n) {
var reverseN = (255 - parseInt('0x' + n)).toString(16);
return reverseN[1] ? reverseN : '0' + reverseN;
}
function n10_reverse_n10(n) {
return (255 - n);
}
目录很简单
申请npm账号 地址 https://www.npmjs.com/login
登陆
npm login
发布
npm publish
403没权限,需要先去邮箱验证,邮件里的验证地址 需要在刚刚登陆账号的浏览器打开 才能完成验证。
然后再次发布
打开npm账号查看package
发布成功
npm包地址:reverse-color-loader
看看效果
在项目中引入刚刚发布的loader看看效果
npm install --save-dev reverse-color-loader
webpack中配置使用
{
test: /\.(css|js)$/,
use: 'reverse-color-loader'
},
页面效果
生效,绿色 被反转为 紫色。
更新npm包
添加loader简介
根目录新建文件 README.md
# reverse-color-loader
是一个 webpack loader,可以使项目中的设置的颜色(如color, background等)反转。
## Getting Started
To begin, you'll need to install <code>reverse-color-loader</code>:
npm install --save-dev reverse-color-loader
Then add the plugin to your webpack config. For example:
### webpack.config.js
module.exports = {
module: {
rules: [
{
test: /\.(jsx?|tsx?|css|less|sass)/,
use: 'reverse-color-loader',
},
],
},
};
关联GitHub, 在 package.json
中 加入
"repository": "whosmeya/reverse-color-loader",
代码提交到 GitHub
然后发布,发布有三种
npm version patch && git push --follow-tags && npm publish
npm version minor && git push --follow-tags && npm publish
npm version major && git push --follow-tags && npm publish
这样将递增包版本号,提交变更,然后创建一个本地 tag 标签,并推送到 github 和发布到 npm package。
我们改动很小,所以使用第一种
npm version patch && git push --follow-tags && npm publish
发版成功
查看npm网站,更新内容成功。