如何使用webpack打包一个库library的方法步骤

前端之家收集整理的这篇文章主要介绍了如何使用webpack打包一个库library的方法步骤前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

日常我们开发了一个库之后,如何打包之后提供给别人使用呢?如果你不清楚,就继续看吧!!!

初始化库

  1. mkdir library
  2. cd library
  3. npm init -y

经过以上步骤后会生成一个library文件夹,里面包含一个package.json文件。然后简单修改为如下所示:

  1. {
  2. "name": "library","version": "1.0.0","description": "","main": "./dist/library.js","scripts": {
  3. "build": "webpack"
  4. },"keywords": [],"author": "rocky","license": "MIT"
  5. }

简单创建几个文件

在根目录下新建src文件夹,新建一个math.js和string.js。相关文件内容如下:

  1. // math.js
  2. export function add(a,b){
  3. return a+b;
  4. }
  5.  
  6. export function minus(a,b){
  7. return a-b;
  8. }
  9.  
  10. export function multiply(a,b){
  11. return a*b;
  12. }
  13.  
  14. export function division(a,b){
  15. return a/b;
  16. }
  1. // string.js
  2. export function join(a,b){
  3. return a+" "+b;
  4. }

继续新建一个index.js

  1. import * as math from "./math";
  2. import * as string from "./string";
  3.  
  4. export default {math,string}

简单安装webpack依赖

  1. npm install webpack webpack-cli --save

安装的同时,可以创建webpack配置文件webpack.config.js,如下配置:

  1. const path = require("path");
  2.  
  3. module.exports={
  4. mode:"production",entry:"./src/index.js",output:{
  5. path:path.resolve(__dirname,"dist"),filename:"library.js",library:"library",// 在全局变量增加一个library变量
  6. libraryTarget:"umd"
  7. }
  8. }

安装成功后,执行打包命令

  1. npm run build

之后会在根目录下生成一个dist文件夹,里面包含一个library.js。

如何使用呢?

如果别人要使用这个打包后的library.js的话,可能会有如下几种方式:

  1. // es6方式
  2. import library from "library"
  3.  
  4. // commonjs方式
  5. const library=require("library")
  6.  
  7. // AMD方式
  8. require(["library"],function(){})
  9.  
  10. // script标签引入
  11. <script src="library.js"></script>

在dist文件夹里创建一个index.html,用script引入之前打包生成的library.js。浏览器打开index.html,在控制台中输入library,会得到如下所示的结果:

如何使用webpack打包一个库library的方法步骤

一个简单的库便打包生成了。

注解:webpack中libraryTarget配置项可以设为umd,表示采用umd规范,如果设置为this,表示在this下挂载了一个library变量。更多用法可参考webpack官网

引入别的库用法

假设需要引入lodash.安装lodash

  1. npm install lodash --save

修改之前创建的string.js

  1. import _ from "lodash";
  2.  
  3. export function join(a,b){
  4. // return a+" "+b;
  5. return _.join([a,b]," ");
  6. }

运行打包命令,发现打包出来的库体积变大了,因为我们引入了lodash,导致包变大。怎么办呢?修改webpack配置文件
增加一个externals配置项:

  1. const path =require("path");
  2.  
  3. module.exports={
  4. mode:"production",externals:["lodash"],// 配置不打包文件
  5. output:{
  6. path:path.resolve(__dirname,libraryTarget:"umd"
  7. }
  8. }

之后打包就会发现库的体积又变小了。

以上就是一个简单打包库的过程,打包完成后,就可以使用npm相关命令将库发布到npm仓库,发布成功后,就可以让别的小伙伴使用了。当然在实际情况中,打包一个库的话,需要做的还有很多,比如tree-shaking,优化方面的东西,我也正在逐渐学习中!

参考资料

webpack output libraryTarget
webpack external

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

猜你在找的JavaScript相关文章