搭建Vue3组件库:第八章 如何封装兼容多种JS模块标准的软件包?

简介: 本章介绍一些JS的模块规范

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


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

目前常见的模块规范有:

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

其中最常用的有三类:ESMCJSIFFEESM 标准目前已经是前端开发的标配,无论是选用 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 属性: 是混淆的意思,这里面有两个混淆工具可以选择,即 terseresbuild。目前选择了比较老牌的压缩工具 terser,毕竟从 Rollup 时代开始就一直在用。

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

pnpm build

查看打包结果。

在这里插入图片描述


task2】配置SourceMap映射

  • 什么是Sourcemap

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

  • Sourcemap的作用

简单说 Sourcemap 构建了处理前以及处理后的代码之间的一座桥梁,方便定位生产环境中出现 bug 的位置。因为现在的前端开发都是模块化、组件化的方式,在上线前对 jscss 文件进行合并压缩容易造成混淆。如果对这样的线上代码进行调试,肯定不切实际,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

在这里插入图片描述

相关文章
|
2月前
|
移动开发 JavaScript 前端开发
一些处理浏览器兼容性问题的JavaScript库
这些库在处理浏览器兼容性问题方面都有着各自的特点和优势,可以根据具体的需求和项目情况选择合适的库来使用,从而提高代码的兼容性和稳定性,为用户提供更好的体验。同时,随着浏览器技术的不断发展,还需要持续关注和学习新的兼容性解决方案。
112 48
|
2月前
|
JavaScript 前端开发
Moment.js与其他处理时间戳格式差异的JavaScript库相比有什么优势?
Moment.js与其他处理时间戳格式差异的JavaScript库相比有什么优势?
|
2月前
|
CDN
如何在项目中使用Moment.js库?
如何在项目中使用Moment.js库?
|
2月前
|
JavaScript 前端开发
如何在不影响性能的前提下使用JavaScript库来实现复杂的动画效果?
如何在不影响性能的前提下使用JavaScript库来实现复杂的动画效果?
|
2月前
|
算法 开发者
Moment.js库是如何处理不同浏览器的时间戳格式差异的?
总的来说,Moment.js 通过一系列的技术手段和策略,有效地处理了不同浏览器的时间戳格式差异,为开发者提供了一个稳定、可靠且易于使用的时间处理工具。
43 1
|
2月前
|
资源调度 前端开发 JavaScript
vite3+vue3 实现前端部署加密混淆 javascript-obfuscator
【11月更文挑战第10天】本文介绍了在 Vite 3 + Vue 3 项目中使用 `javascript-obfuscator` 实现前端代码加密混淆的详细步骤,包括安装依赖、创建混淆脚本、修改 `package.json` 脚本命令、构建项目并执行混淆,以及在 HTML 文件中引用混淆后的文件。通过这些步骤,可以有效提高代码的安全性。
107 2
|
2月前
|
JavaScript 前端开发 搜索推荐
Moment.js、Day.js、Miment,日期时间库怎么选?
【10月更文挑战第29天】如果你需要一个功能强大、插件丰富的日期时间库,并且对性能要求不是特别苛刻,Moment.js是一个不错的选择;如果你追求极致的轻量级和高性能,那么Day.js可能更适合你;而如果你有一些特定的日期时间处理需求,并且希望在性能和功能之间取得平衡,Miment也是可以考虑的。
|
3月前
|
JavaScript
如何在 Vue 项目中选择合适的模块格式
【10月更文挑战第20天】选择合适的模块格式需要综合考虑多个因素,没有一种绝对正确的选择。需要根据项目的具体情况进行权衡和分析。在实际选择过程中,要保持灵活性,根据项目的发展和变化适时调整模块格式。
24 7
|
2月前
|
存储 JavaScript 前端开发
decimal.js库的安装和使用方法
【10月更文挑战第24天】decimal.js 是一个非常实用的高精度计算库,通过合理的安装和使用,可以在 JavaScript 中实现精确的数值计算和处理。你可以根据具体的需求和项目情况,灵活运用该库来解决数字精度丢失的问题。
|
2月前
|
前端开发 JavaScript 容器
在 vite+vue 中使用@originjs/vite-plugin-federation 模块联邦
【10月更文挑战第25天】模块联邦是一种强大的技术,它允许将不同的微前端模块组合在一起,形成一个统一的应用。在 vite+vue 项目中,使用@originjs/vite-plugin-federation 模块联邦可以实现高效的模块共享和组合。通过本文的介绍,相信你已经了解了如何在 vite+vue 项目中使用@originjs/vite-plugin-federation 模块联邦,包括安装、配置和使用等方面。在实际开发中,你可以根据自己的需求和项目的特点,灵活地使用模块联邦,提高项目的可维护性和扩展性。