继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

webpack Library的打包(21)

瓦力博客
关注TA
已关注
手记 54
粉丝 26
获赞 78

我们之前开发的都是业务代码,如果我们需要开发一些库代码给小伙伴们用或者给自己的团队用。那么如何使用webpack打包呢?这小节将带大家写webpack对库进行打包。

1.新建项目

由于library是要上传到npm或者其他包管理器上的,所以我们需要新建一个项目

webpackLibrary

进入项目

cd webpackLibrary

初始化项目

yarn init

文件结构

webpackLibrary
|-src
    |-index.js
    |-math.js
    |-string.js
|-pachage.json    

math.js

export function add(a,b){
    return a + b;
}

export function minus(a,b){
    return a - b;
}

export function multiply(a,b){
    return a * b;
}

export function division(a,b){
    return a / b;
}

string.js

export function join(a,b){
    return a + ' ' + b;
}

index.js

import * as math  from "./math";
import * as string from "./string";


export default {
    math,
    string
}

2.安装webpack

yarn add webpack webpack-cli

3.创建webpack配置文件

webpackLibrary
 |-src
    |-index.js
    |-math.js
    |-string.js
 |-pachage.json  
+|-webpack.config.js  

安装CleanWebpackPlugin

yarn add clean-webpack-plugin

webpack.config.js

const path = require('path');
const webpack = require('webpack');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');  //清除

module.exports = {
	mode:'production',
	entry:{
		main:'./src/index.js',  
	},
	plugins: [
		new CleanWebpackPlugin()
	],	
	output:{
        path: path.resolve(__dirname,'dist'),
        filename: 'library.js',
        library: 'library',
        libraryTarget: 'umd'
	}
}

package.json

{
  "name": "webpackLibrary",
  "version": "1.0.0",
  "main": "index.js",
  "repository": "https://github.com/walidream/webpackLibrary.git",
+  "scripts":{
+    "prod": "npx webpack --colors --mode=production"
+  },
  "author": "walidream <walidream@163.com>",
  "license": "MIT",
  "dependencies": {
    "clean-webpack-plugin": "^3.0.0",
    "webpack": "^4.35.0",
    "webpack-cli": "^3.3.4"
  }
}

运行webpack

yarn run prod

这样一个库文件就打包好了,小菜在这里想给大家强调output下面librarylibraryTarget。我们写第三方库,主要是给别人使用,别人使用的方式会很多如

//AMD
const lib = require('library');  

//CommonJS
import { lib } from 'library';

<script src="library.js"></script>

所以在output中要配置librarylibraryTarget,强烈建议大家阅读webpack官方文档。

4.externals

当我们在代码中使用插件如loadsh,用户也在自己的代码中使用了loadsh插件,想要在我们库中去掉loadsh,就需要用到externals

src/string.js

- export function join(a,b){
-    return a + ' ' + b;
- }

import _ from 'loadsh';
+ export function join(a,b){
+    return _.join([a,b],' ');
+ }

然后在externals中把loadsh去掉

webpack.config.js

const path = require('path');
const webpack = require('webpack');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');  //清除

module.exports = {
	mode:'production',
	entry:{
		main:'./src/index.js',  
	},
+    externals:'loadsh',
	plugins: [
		new CleanWebpackPlugin()
	],	
	output:{
        path: path.resolve(__dirname,'dist'),
        filename: 'library.js',
        library: 'library',
        libraryTarget: 'umd'
	}
}

5.上传到npm

在上传到npm之前,我们需要修改package.json文件main的路径

package.json

{
  "name": "webpackLibrary",
  "version": "1.0.0",
  "main": "./dist/library.js",
  "repository": "https://github.com/walidream/webpackLibrary.git",
  "scripts":{
    "prod": "npx webpack --colors --mode=production"
  },
  "author": "walidream <walidream@163.com>",
  "license": "MIT",
  "dependencies": {
    "clean-webpack-plugin": "^3.0.0",
    "webpack": "^4.35.0",
    "webpack-cli": "^3.3.4"
  }
}

接着我们在npm官网上注册一个账号。打开自己命令窗口

//添加用户
npm adduser
//上传包  
npm publish

注册完成账号,记得一定要用邮电验证一下,不然的话是不能上传的。

ssl

其实真正开发一个库,webpack配置工作量也是蛮大的,小菜只是在这里简单的记录一下。最后建议大家不要随便上传一些没有用的包,尽可能的维护npm社区的质量。

打开App,阅读手记
0人推荐
发表评论
随时随地看视频慕课网APP