专栏首页江涛的博客实用程序包utils - 基于Rollup打包输出各模块文件(二)

实用程序包utils - 基于Rollup打包输出各模块文件(二)

上一次,我们讲到了如何去搭建一个前端工具库的工程,那么今天我们来聊一聊如何去将其打包输出。

需求

事情是这个样子的。我有一个这样的需求,或者是我发现有这么一个需求。就是有时候吧,我也不想搞的那么复杂,我就想写一个简简单单的demo,引入一个JS脚本,CTRL + S一按,浏览器一打开,啪的一下,我就能看见效果,我就能爽起来,我不想npm initnpm install这种去搞一个规范的工程,我就想回到远古时代,感受最纯真的爱。再比如后端的同学或者测试的同学,我不想知道npm是什么,我也不想去搞什么前端工程化,我就想像在学校老师教我的那样,引入一个JS脚本,啪地一下能出效果,就像layui、jquery那样,引入相关的脚本,it works。

好,今天围绕着楼上这个问题,我们去思考上一次工程化留下来的问题。------ 怎么将开发的模块打包输出?

JS中的模块规范

随着时代的发展,社会的进步。为了更好地解决代码的冲突和依赖等问题,JS的模块也经历了很大的发展。比如写服务端Node.js同学熟悉的CommonJS规范,以及专为浏览器设计的AMD(Asynchronous Module Definition)规范,还有它们的结合体UMD(Universal Module Definition)规范,还有2015年推出的ES Module规范。这里具体的示例我们放到后面再讲。

Rollup介绍

Rollup是一个Javascript的模块打包器,它可以做这样一件事,将一大串代码打包成一个模块文件,这个模块可以是我们上面提到的模块规范,比如著名的Vue.js框架就是使用了rollup进行打包相关的文件输出。

如何在项目中运用rollup

这里我主要是用了这5个主要的辅助包

执行相关命令npm install package name即可,欧,不要忘了安装rollup本包

@rollup/plugin-json

这个插件主要是将JSON文件转换为ES Module

https://github.com/rollup/plugins/tree/master/packages/json

rollup-plugin-babel

我们知道babel是JS的一个语法编译器,有了它,或者说加上它的一些插件(比如说垫片),你可以在一些低版本或者不支持ES高级语法的环境下使用它

https://github.com/rollup/plugins/tree/master/packages/babel

rollup-plugin-terser

可能我们生成的代码体积很大,用这个插件可以有效地减小我们输出包的体积

https://github.com/trysound/rollup-plugin-terser

@rollup/plugin-commonjs

这个插件就是将commonJS的语法转化成ES Module的

https://github.com/rollup/plugins/blob/master/packages/commonjs

@rollup/plugin-node-resolve

这个是处理npm包的相关引入依赖的

https://github.com/rollup/plugins/tree/master/packages/node-resolve

下面是我的utils项目的一份配置文件rollup.config.js

import json from '@rollup/plugin-json';
import babel from 'rollup-plugin-babel';
import { terser } from 'rollup-plugin-terser';
import commonjs from '@rollup/plugin-commonjs';
import resolve from '@rollup/plugin-node-resolve';

import pkg from './package.json';

const banner =
  '/*!\n' +
  ` * ataola-utils.js v${pkg.version}\n` +
  ` * (c) 2021-${new Date().getFullYear()} ataola(Jiangtao Zheng)\n` +
  ' * Released under the MIT License.\n' +
  ' */';

export default [
  // browser-friendly UMD build
  {
    input: 'index.js',
    output: {
      name: 'ataola-utils',
      file: pkg.browser,
      format: 'umd',
      sourcemap: true,
      banner,
    },
    plugins: [
      json({
        compact: true,
      }),
      resolve(),
      commonjs(),
      babel({
        exclude: 'node_modules/**',
        runtimeHelpers: true,
        presets: ['@babel/preset-env'],
        plugins: [
          [
            '@babel/plugin-transform-runtime',
            { useESModules: true /**, corejs: 3  */ },
          ],
        ],
      }),
    ],
  },
  {
    input: 'index.js',
    output: [
      { file: pkg.main, format: 'cjs', banner, sourcemap: true },
      { file: pkg.module, format: 'esm', banner, sourcemap: true },
      {
        name: 'ataola-utils',
        file: 'dist/ataola-utils.amd.js',
        format: 'amd',
        extend: true,
        sourcemap: true,
        banner,
      },
      {
        name: 'ataola-utils',
        file: 'dist/ataola-utils.js',
        format: 'iife',
        extend: true,
        sourcemap: true,
        banner,
      },
      {
        name: 'ataola-utils',
        file: 'dist/ataola-utils.min.js',
        format: 'iife',
        extend: true,
        banner,
        sourcemap: true,
        plugins: [terser()],
      },
    ],
    plugins: [
      json({
        compact: true,
      }),
      resolve(),
      commonjs(),
      babel({
        // https://github.com/rollup/rollup-plugin-babel#configuring-babel
        exclude: 'node_modules/**',
        runtimeHelpers: true,
        presets: ['@babel/preset-env'],
        plugins: [
          [
            '@babel/plugin-transform-runtime',
            { useESModules: true /**, corejs: 3  */ },
          ],
        ],
      }),
    ],
  },
];

https://github.com/ataola/utils/blob/main/rollup.config.js

楼上的配置项通俗易懂,字面意思就是它的意思,就不过多解释了。这里我输出的是一个数组,其实也可以是个对象,然后我们在output上面去配置输出的格式,这个根据项目可以灵活配置的。主要是配置了打包输出umd、amd、commonjs、esmodule以及IIFE(Immediately Invoked Function Expression)立即调用函数表达式

打包出来的文件怎么使用

AMD

<!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>ataola utils</title>
</head>
<body>
  
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/require.js/2.3.6/require.js"></script>
<script>
requirejs(["https://unpkg.com/@ataola/utils@0.1.10/dist/ataola-utils.amd.js"], function(ataola) {
   console.log(ataola)
   console.log(ataola.getVersion())
});
</script>
</html>

https://zhengjiangtao.cn/show/zj/ataola-utils-amd.html

UMD

<!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>ataola utils</title>
</head>
<body>
  
</body>
<script src="https://unpkg.com/@ataola/utils@0.1.10/dist/ataola-utils.umd.js"></script>
<script>
  const ataola = this['ataola-utils'];
  console.log(ataola);
  console.log(ataola.getVersion());
</script>
</html>

https://zhengjiangtao.cn/show/zj/ataola-utils-umd.html

IIFE

<!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>ataola utils</title>
</head>
<body>
  
</body>
<script src="https://unpkg.com/@ataola/utils@0.1.10/dist/ataola-utils.min.js"></script>
<script>
  // https://unpkg.com/@ataola/utils@0.1.10/dist/ataola-utils.js
  // https://cdn.jsdelivr.net/npm/@ataola/utils@0.1.10/dist/ataola-utils.js
  // use this['ataola-utils'] || window['ataola-utils']
  const ataola = this['ataola-utils'];
  console.log(ataola);
  console.log(ataola.getVersion());
</script>
</html>

https://zhengjiangtao.cn/show/zj/ataola-utils.html

ES Module

<!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>utils unpkg</title>
</head>
<body>
  
</body>
<script type="module">
import * as ataola from 'https://unpkg.com/@ataola/utils@0.1.10/dist/ataola-utils.esm.js';

console.log(ataola);
</script>
</html>

https://zhengjiangtao.cn/show/zj/ataola-utils-amd.html

ComonJS

这里AMD相关的引入需要你先引入require.js的支持,如果是commonJS模块的话,需要用seajs,我试了下不是很好使,我放弃了别打我,建议直接在node.js环境下引入,如楼上

参考文献

Rollup官方文档:https://rollupjs.org/guide/zh/

Rollup插件库:https://github.com/rollup/plugins

IIFE:https://developer.mozilla.org/zh-CN/docs/Glossary/IIFE

本文分享自微信公众号 - 前端路桥(ataola),作者:璀错

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2021-06-07

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 彻底理清 AMD,CommonJS,CMD,UMD,ES6 modules

    1.Rollup 是什么2.CommonJS、AMD、CMD、UMD、ES6 分别的介绍3.ES6 模块与 CommonJS 模块的区别4.模块演进的产物 ——...

    前端迷
  • Webpack 深入浅出之公司级分享总结(内附完整ppt)

    前段时间,在公司做了个 Webpack 的分享。听众40多人,感觉还不错。所以总结一下,先看一下ppt的目录:

    winty
  • 我从 Vuejs 中学到了什么

    框架设计远没有大家想的那么简单,并不是说只把功能开发完成,能用就算完事儿了,这里面还是有很多学问的。比如说,我们的框架应该给用户提供哪些构建产物?产物的模块格式...

    coder_koala
  • 从 rollup 初版源码学习打包原理

    为了学习 rollup 打包原理,我克隆了最新版(v2.26.5)的源码。然后发现打包器和我想像的不太一样,代码实在太多了,光看 d.ts 文件就看得头疼。为了...

    谭光志
  • 代码体积减少80%!Taro H5转换与优化升级

    作为一个多端开发框架,Taro从项目发起时就已经支持编译到H5端。随着Taro 多端能力的不断成熟,对 Taro H5 端应用的要求也不断提升,已经不再满足于“...

    京东技术
  • 构建打包工具Rollup.js入门指南

    最近在看Vue源码的时候发现一个新的打包工具Rollup.js,之前没有听说过这个工具,也不了解Rollup.js相比于常用的打包工具webpack有什么异同和...

    用户1462769
  • rollup从0到1

    开发基于 typescript ES6 语法, 使用jest eslint 为校验或测试的npm包。 因为需要使用到 ts, 模块化,所以就存在模块编译打包的问...

    copy_left
  • 从零开始构建 vue3

    2019年10月5日凌晨,Vue 的作者尤雨溪公布了 Vue3 的源代码。当然,它暂时还不是完整的 Vue3,而是 pre-alpha 版,只完成了一些核心功能...

    我是一条小青蛇
  • Vite 特性和部分源码解析

    Vite 的主要特性就是 Bundleless。基于浏览器开始原生的支持 JavaScript 模块功能 (https://developer.mozilla....

    政采云前端团队
  • vue、rollup、sass、requirejs组成的vueManager

    近段时间本人一直在思考如何基于vue搭建一个中后端管理系统的通用基础前端解决方案。思考的主要问题点如下: 如何使各个子业务模块的按需加载 css预处理方案的选择...

    sam dragon
  • lerna 从0到1

    Lerna 是一种工具,针对 使用 git 和 npm 管理多软件包代码仓库的工作流程进行优化。 多包管理器

    copy_left
  • rollup是面向library的?!

    在Behind the Scenes: Improving the Repository Infrastructure – React Blog看到了这个,有些...

    ayqy贾杰
  • 《前端那些事》从0到1开发工具库

    在日常开发中,特别是中后台管理页面,会经常使用到一些常用的函数比如:防抖节流、本地存储相关、时间格式化等,但是随着项目不断增加,复用性和通用性就成为一个很至关重...

    树酱
  • 使用roolup构建你的lib

    Rollup, 和 Webpack, Parcel 都是模块打包工具(module bundler tool), 但是侧重点不同, 我们要聊的 Rollup更加...

    lzugis
  • 配置Tree Shaking来减少JavaScript的打包体积

    译者按: 用Tree Shaking技术来减少JavaScript的Payload大小

    Fundebug
  • Rollup的基本使用

    rollup.js是一个模块打包工具,可以使项目从一个入口文件开始,将所有使用到的模块文件都打包到一个最终的发布文件中,Rollup极其适合构建一个工具库,Vu...

    WindrunnerMax
  • 前端组件/库打包利器rollup使用与配置实战

    写rollup的文章是因为笔者最近要规范前端开发的业务流程和架构,并提供内部公有组件库和工具库供团队使用。在查阅大量资料并对比了webpack和rollup的优...

    徐小夕
  • 一文快速上手Rollup,JavaScript类库打包好帮手

    项目中一直用的都是webpack,前一段需要开发几个类库供其他平台使用,本来打算继续用webpack的,但感觉webpack用来开发js库,不仅繁琐而且打包后的...

    JowayYoung
  • 从Npm Script到Webpack,6种常见的前端构建工具对比

    小编说:历史上先后出现了一系列构建工具,它们各有优缺点。由于前端工程师很熟悉JavaScript,Node.js又可以胜任所有构建需求,所以大多数构建工具都是用...

    企鹅号小编

扫码关注云+社区

领取腾讯云代金券