前言
随着项目越来越大，很多的工具类，或者一些公共组件，需要抽离出来，减少代码量，让开发者更多的关注业务代码。当然优化有很多种，这里演示的是制作一个npm包，也是一种较简单方法。
为何抽离，哪些需要抽离？
为何抽离，哪些需要抽离？其实并不是所有的工具类都抽离才是最好的，抽离的前提就是那个工具定下来是，始终不会变的，改变的也只是一些少量的参数。还有就是公共组件也是。不能反其道而行，做了反而实际开发中，更加麻烦。自己也演示的是项目中可能会用到的接口签名工具类。
项目初始化
npm init --y 并且修改package.json文件
{
"name": "signature-tool",
"version": "1.0.0",
"description": "",
+ "main": "lib/signature-tool.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
+ "lib": "cross-env NODE_ENV=production webpack --progress --hide-modules"
},
+ "repository": {
+ "type": "git",
+ "url": "https://github.com/forestxieCode/signature-tool"
+ },
+ "keywords": [
+ "signature-tool",
+ "signature"
+ ],
"author": "",
"license": "ISC"
}
安装需要的npm包npm install babel-core babel-loader babel-preset-stage-3 cross-env webpack-dev-server --save-dev
"devDependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-preset-env": "^1.6.0",
"babel-preset-stage-3": "^6.24.1",
"cross-env": "^5.0.5",
"webpack": "^3.6.0",
"webpack-dev-server": "^2.9.1"
}
新建一个webpack.config.js配置文件
var path = require('path')
var webpack = require('webpack')
module.exports = {
entry: "./main/index.js", // 入口文件地址
output: { // 配置出口文件，并且设置umd文件引入
path: path.resolve(__dirname, "./lib"),
publicPath: "/lib/" ,
filename: "signature-tool.js" ,
library: "signature-tool" ,
libraryTarget: "umd" ,
umdNamedDefine: true ,
},
module: {
rules: [
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/
}
]
},
resolve: {
extensions: ['*', '.js', '.json']
},
performance: {
hints: false
},
devtool: '#eval-source-map'
}
if (process.env.NODE_ENV === 'production') {
module.exports.devtool = '#source-map'
// http://vue-loader.vuejs.org/en/workflow/production.html
module.exports.plugins = (module.exports.plugins || []).concat([
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: '"production"'
}
}),
new webpack.optimize.UglifyJsPlugin({
sourceMap: true,
compress: {
warnings: false
}
}),
new webpack.LoaderOptionsPlugin({
minimize: true
})
])
}
新增.babelrc,.npmignore文件，以及main,和lib文件夹
.babelrc 文件
{
"presets": [
["env", { "modules": false }],
"stage-3"
]
}
.npmignore 文件
# 忽略目录
node_modules/
packages/
目录文件
初始化工作就完成拉
工具类的编写
再main文件夹下新增一个index.js 文件
import SignatureTools from './src/index.js'
let signatureTool = '' // 定义变量获取实体
const install = function (Vue, options){
signatureTool = new SignatureTools(options)
Vue.prototype.$signatureTool = signatureTool // Vue的use规范
}
export {
install,
signatureTool
}
main/src/index.js
import tools from './utils/tools.js'
let options = {
secret: '', // 加密签名
axios:''
}
function SignatureTools(opt){
Object.assign(options, opt)
}
SignatureTools.prototype = {
// 添加签名
addSignature:function(request){
request.headers.Signature = tools.formatSignature({
Query: tools.getQuery(request),
secret: options.secret
})
return request
}
}
export default SignatureTools
main/src/utils/tools.js 工具类的实现，这省略一些代码。
function parseQueryToString(params) {
const result = Object.keys(params)
.map(k =>
k + '=' + params[k]
)
.join('&')
return result
}
export default {
// 获取Query的数据
getQuery:function (request) {
let result = {}
let href = ''
if (request.url.indexOf('?') > -1) {
href = request.url.slice(request.url.indexOf('?'))
}
new URLSearchParams(href).forEach((v, k) => result[k] = v);
if (request.params) {
result = Object.assign((request.params.params ? request.params.params : request.params), result)
}
return result;
},
// 签名数据格式化
formatSignature:function (obj) {
----
----
---
}
}
Over编写完逻辑代码，最后执行npm run lib 生成lib文件，之后就可以发布到npm拉。
npm发包步骤
- 到www.npmjs.com/ 注册一个npm账号
- 在项目更目录下npm login
- 输入注册的邮箱和密码
- 执行npm publish
- over
总结
其实你也很牛逼！！！ ，觉得可以给个star哈..........
