本文主要是介绍wenpack 打包库插件,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!
1.webpack环境安装:
mkdir large-number
cd large-number
npm init -y
npm i webpack webpack-cli -D
2. 创建webpack配置文件 webpack.config.js
创建src目录 创建src目录下 index.js
书写index.js内容
export default function add(a , b){
let i = a.length - 1;
let j = b.length - 1;
let carry = 0;
let ret = '';
while(i >=0 || j >=0){
let x = 0;
let y = 0;
let sum;
if(i>=0){
x = a[i] - '0';
i--; }
if(j>=0){
y = b[j] - '0';
j--;
}
sum = x + y +carry;
if(sum>=10){
carry = 1;
sum -=10;
}else{
carry = 0;
}
ret = sum +ret;
}
if(carry){
ret = carry + ret;
}
return ret;
}
写 webpack.config.js配置文件
const TerserPlugin = require('terser-webpack-plugin');
module.exports = {
entry: {
'adding-large-number': './src/index.js',
'adding-large-number.min': './src/index.js'
},
output: {
filename: '[name].js',
library: 'largeNumber',
libraryTarget: 'umd',
libraryExport: 'default'
},
mode:'none',
optimization: {
minimize: true,
minimizer: [
new TerserPlugin({
include: /\.min\.js$/,
})
]
}
}
配置package.json 相关打包信息
{
"name": "adding-large-number",
"version": "1.0.2",
"description": "大整数加法打包",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack",
"prepublish": "webpack"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"terser-webpack-plugin": "^2.1.0",
"webpack": "^4.40.2",
"webpack-cli": "^3.3.9"
}
}
最后根据package.json的main 的书写根目录库的入口index.js
if(process.env.NODE_ENV == 'production'){
module.exports = require('./dist/adding-large-number.min.js');
} else {
module.exports = require('./dist/adding-large-number.js');
}
接下来发布npm包:npm login npm publish
这篇关于wenpack 打包库插件的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!