第八章兼容多种模块标准的软件包封装

最新推荐文章于 2023-09-18 08:01:35 发布

天界程序员

最新推荐文章于 2023-09-18 08:01:35 发布

阅读量517

点赞数

分类专栏：搭建Vue3组件库文章标签： umd esm cjs vite 打包

本文链接：https://blog.csdn.net/qq_36362721/article/details/127932224

版权

搭建Vue3组件库专栏收录该内容

17 篇文章 18 订阅

订阅专栏

第八章如何封装兼容多种JS模块标准的软件包？

为了方便用户使用，一款成熟的类库都会提供多种模块封装形式，比如大家最常用到的 Vue，就提供了cjs、esm、umd 等多种封装模式，并且还会提供对应的压缩版本，方便在生产环境下使用。

第一，需要考虑的是需要支持哪些模块规范。

目前常见的模块规范有：

IFFE：使用立即执行函数实现模块化例：(function(){})()；
CJS：基于 CommonJS 标准的模块化；
AMD：使用 Require 编写；
CMD：使用 SeaJS 编写；
ESM：ES 标准的模块化方案 ( ES6 标准提出 )；
UMD：兼容CJS与 AMD、IFFE 规范。

其中最常用的有三类：ESM、CJS 和 IFFE。 ESM 标准目前已经是前端开发的标配，无论是选用 Webpack 还是 Vite ，都会采用这种模块规范。其次是 CJS，不可否认，有大量的存量代码还使用CJS规范，完全没有必要因为引入一个库去更改编译规则。最后是 IFFE 这种类型，非常适用于逻辑简单，无需搭建工程化环境的前端应用。

第二，需要考虑的是代码的压缩和混淆问题。

代码压缩是指去除代码中的空格、制表符、换行符等内容，将代码压缩至几行内容甚至一行，这样可以提高网站的加载速度。混淆是将代码转换成一种功能上等价，但是难以阅读和理解的形式。混淆的主要目的是增加反向工程的难度，同时也可以相对减少代码的体积，比如将变量名缩短就会减少代码的体积。

第三，还需要考虑 SourceMap 配置。

SourceMap 就是一个信息文件，里面存储了代码打包转换后的位置信息，实质是一个 json 描述文件，维护了打包前后的代码映射关系。通

常输出的模块不会提供 SourceMap，因为通过 sourcemap 就很容易还原原始代码。但是如果你想在浏览器中断点调试你的代码，或者希望在异常监控工具中定位出错位置，SourceMap 就非常有必要。所以还是要正确掌握 SourceMap 的生成方法。

本章任务

配置Vite打包输出多种标准JS模块格式文件
配置 SourceMap 映射
测试打包结果

【`task1`】配置Vite打包规则

文件名：vite.config.ts

const rollupOptions = {
  external: ["vue"],
  output: {
    globals: {
      vue: "Vue",
    },
  },
};

由于 Vite 的构建是通过 rollup 完成的，所以rollup中的一些配置通过这个属性传递给 rollup。其中需要配置的两个属性如下：

external：作用是将该模块保留在 bundle 之外，比如在数组中添加了 vue ，就是为了不让vue打包到组件库中；
output：这个配置用于 umd/iffe 包中，意思是全局中的某个模块在组件库中叫什么名字。

继续配置：

export default defineConfig({
 build: {
    rollupOptions,
    minify: 'terser', // boolean | 'terser' | 'esbuild'
    //sourcemap: true, // 输出单独 source文件
    reportCompressedSize: true,  // 生成压缩大小报告
    cssCodeSplit: true, // css代码分割
    lib: {
      entry: "./src/entry.ts",
      name: "SmartyUI",
      fileName: "smarty-ui",
      formats: ["esm", "umd", "iife"], // 导出模块类型
    },
  },
});

由于使用了 terser 用于代码压缩需要单独安装一下

pnpm i terser@"5.4.0" -D

其他属性：

formats： [“esm”, “umd”, “iife”] 是输出模块类型；
fileName：是文件名，其实只是一个输出文件名的前缀，默认情况下会和模块类型配合组成最终的文件名
name 属性 : 生成包的名字，在 iife/umd 包，同一页上的其他脚本可以访问它。
minify 属性：是混淆的意思，这里面有两个混淆工具可以选择，即 terser 和 esbuild。目前选择了比较老牌的压缩工具 terser，毕竟从 Rollup 时代开始就一直在用。

最后执行打包命令查看打包文件

pnpm build

查看打包结果。

在这里插入图片描述

【`task2`】配置SourceMap映射

什么是Sourcemap？

Sourcemap 本质上是一个信息文件，里面储存着代码转换前后的对应位置信息。它记录了转换压缩后的代码所对应的转换前的源代码位置，是源代码和生产代码的映射。 Sourcemap 解决了在打包过程中，代码经过压缩，去空格以及 babel 编译转化后，由于代码之间差异性过大，造成无法debug的问题。

Sourcemap的作用

简单说 Sourcemap 构建了处理前以及处理后的代码之间的一座桥梁，方便定位生产环境中出现 bug 的位置。因为现在的前端开发都是模块化、组件化的方式，在上线前对 js 和 css 文件进行合并压缩容易造成混淆。如果对这样的线上代码进行调试，肯定不切实际，sourceMap 的作用就是能够让浏览器的调试面版将生成后的代码映射到源码文件当中，开发者可以在源码文件中 debug，这样就会让程序员调试轻松、简单很多。

如果希望导出 SourceMap，只需要添加 SourceMap 属性就好了。

文件名：vite.config.ts

export default defineConfig({
 build: {
    ...
    sourcemap: true, // 输出单独 source文件
    ...
  },
});

此时，构建的时候会生成 SourceMap。

在这里插入图片描述

有了 SourceMap ，就可以在 Chrome 调试工具中进行断点调试了。

【`task3`】测试打包结果

最后编写一个测试页来确定输出模块效果OK，先测试是 IFFE 模块。

文件名：demo/iffe/index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Test IFFE</title>
    <link rel="stylesheet" href="../../dist/assets/entry.cb9ba4f4.css">
    <script src="../../node_modules/vue/dist/vue.global.js"></script>
    <script src="../../dist/smarty-ui.iife.js"></script>
</head>
<body>
    <h1>Demo IFFE</h1>
    <div id="app"></div>

    <script>
        console.log('111')
        const { createApp } = Vue
        console.log('vue', Vue)
        console.log('SmartyUI', SmartyUI)
        createApp({
            template: `
            <div style="margin-bottom:20px;">
                <SButton color="blue">主要按钮</SButton>
                <SButton color="green">绿色按钮</SButton>
                <SButton color="gray">灰色按钮</SButton>
                <SButton color="yellow">黄色按钮</SButton>
                <SButton color="red">红色按钮</SButton>
            </div>
           
            <div style="margin-bottom:20px;">
                <SButton color="blue"  icon="search">搜索按钮</SButton>
                <SButton color="green"  icon="edit">编辑按钮</SButton>
                <SButton color="gray"  icon="check">成功按钮</SButton>
                <SButton color="yellow"  icon="message">提示按钮</SButton>
                <SButton color="red"  icon="delete">删除按钮</SButton>
            </div>
            <div style="margin-bottom:20px;">
                <SButton color="blue"  icon="search"></SButton>
                <SButton color="green"  icon="edit"></SButton>
                <SButton color="gray" icon="check"></SButton>
                <SButton color="yellow"  icon="message"></SButton>
                <SButton color="red"  icon="delete"></SButton>
            </div>
        `}).use(SmartyUI.default).mount('#app')
    </script>
</body>
</html>

启动项目

pnpm dev

浏览器查看结果

URL地址：http://127.0.0.1:5173/demo/iffe/index.html

在这里插入图片描述

天界程序员

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
第八章兼容多种模块标准的软件包封装

代码压缩是指去除代码中的空格、制表符、换行符等内容，将代码压缩至几行内容甚至一行，这样可以提高网站的加载速度。混淆的主要目的是增加反向工程的难度，同时也可以相对减少代码的体积，比如将变量名缩短就会减少代码的体积。为了方便用户使用，一款成熟的类库都会提供多种模块封装形式，比如大家最常用到的 Vue，就提供了cjs、esm、umd 等多种封装模式，并且还会提供对应的压缩版本，方便在生产环境下使用。它记录了转换压缩后的代码所对应的转换前的源代码位置，是源代码和生产代码的映射。就很容易还原原始代码。
复制链接

扫一扫