rollup 也是一个 JavaScript 的模块化编译工具,可以帮助我们处理资源。

与webpack比较

rollup相比 webpack 理念更为简单,能处理的场景也更有限。

资源类型 处理方式 应用场景
webpack 所有资源 loader、plugin 大型项目
rollup ES Module 为主 plugin 库文件

命令行

通过 npm install rollup -D 先安装到项目中,也可以全局安装。在 src 文件夹下增加入口 index.js 文件,编写代码后使用命令行 npx rollup ./src/index.js -f iife -o dist/bundle.js 编译。

-o 表示输出目录

-c 表示使用默认文件

-w 表示 --watch 监听文件

-f 表示 --format 格式化方式,有四种类型

  • cjs ( commonjs 的执行命令 )
  • iife ( esmodule 的执行命令,编译后文件会将代码放到闭包中 )
  • amd ( amd 方式的执行命令,编译后文件会通过 define 来定义 )
  • umd --name xxUtils ( 表示对多个环境支持,需要指定 name,作为全局的属性 )

编译后文件内容按原样输出

配置文件

命令行可以直接使用,当处理规则较多时命令行需要定义很长,还是通过配置文件会更为方便,默认的配置文件为 rollup.config.js

配置文件中使用 input 定义入口文件,output 定义编译后文件位置,可定义多个,因为 rollup 主要支持 esmodule,所以使用 export default 的方式导出。

export default {
  input: './src/index.js',
  output: [
    {
      format: 'umd',
      name: 'iceUtils',
      file: './dist/ice.umd.js',
    },
    {
      format: 'iife',
      name: 'iceUtils',
      file: './dist/ice.iife.js',
    },
    {
      format: 'cjs',
      file: './dist/ice.cjs.js',
    },
    {
      format: 'amd',
      file: './dist/ice.amd.js',
    },
  ],
};

通过 npx rollup -c 即可通过配置文件编译出四份代码。

支持 commonjs

rollup 中默认不支持 commonjs ,如果使用 module.exports 这种方式导出。

// math.js
const sum = (a, b) => a + b;
const mul = (a, b) => a * b;
module.exports = {
  sum,
  mul,
}; // index.js
const { sum, mul } = require('./math');
console.log(sum(10, 20));
console.log(mul(10, 20));

代码可以通过编译,但将 js 文件引入到 html 文件中,浏览器将无法识别

使用 @rollup/plugin-commonjs 可以解决这个问题

import commonjs from '@rollup/plugin-commonjs';
export default {
  input: './src/index.js',
  output: [
    {
      format: 'cjs',
      file: './dist/ice.cjs.js',
      exports: 'auto',
    },
  ],
  plugins: [commonjs()],
}; // index.js 要通过 esmodule 的方式引入
import { sum, mul } from './math';

如果引入了第三方资源,如 lodash,要使用 @rollup/plugin-node-resolve 来对资源进行解析,此时第三方资源会被打包进编译后的文件,这样使得编译后文件的体积非常大,通过 external 属性排除打包,并在 html 页面引入资源地址。

import commonjs from '@rollup/plugin-commonjs';
import nodeResolve from '@rollup/plugin-node-resolve'; export default {
  input: './src/index.js',
  output: [
    {
      format: 'umd',
      file: './dist/ice.umd.js',
      name: 'iceUtils',
      globals: { lodash: '_' },
    },
  ],
  external: ['lodash'],
  plugins: [commonjs(), nodeResolve()],
}; // index.html
<script src="./node_modules/lodash/lodash.min.js"></script>
<script src="./dist/ice.umd.js"></script>

处理css和vue

css 资源引入直接编译会报错,告知我们需要合适的 plugin

css 使用 rollup-plugin-postcss 来处理,如果项目中有 vue 文件,则需要通过 rollup-plugin-vue 来处理,rollup-plugin-replace 定义全局变量。

import vue from 'rollup-plugin-vue';
import replace from 'rollup-plugin-replace'; plugins: [
  vue(),
  replace({
    'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
  }),
],

转换和压缩

以上代码转换后都与原编写文件一致,没有进行转换和压缩,在 webpack 中使用到的是 babelterser 工具,在 rollup 中也类似。

import babel from '@rollup/plugin-babel';
import { terser } from 'rollup-plugin-terser'; plugins: [
  babel({
    babelHelpers: 'bundled',
  }),
  terser(),
],

这样编译后的资源就经过了代码转换和压缩

本地服务

本地服务通过 rollup-plugin-serve 开启,当资源文件发生变化时,rollup-plugin-livereload 会实时刷新浏览器。

import serve from 'rollup-plugin-serve';
import livereload from 'rollup-plugin-livereload'; plugins: [
  serve({
    open: true,
    port: 8000,
    contentBase: '',
  }),
  livereload(),
],

环境区分

上面的 plugin 都是写到一块的,没有区分开发模式或者生产模式,每次编译都会用到所有的插件,我们可以通过参数来做一个区分。

// 在 package.json 中定义指令
"scripts": {
"build": "npx rollup -c --environment NODE_ENV:production",
"serve": "rollup -c --environment NODE_ENV:development -w"
}, // rollup.config.js
const isProduction = process.env.NODE_ENV === 'production';
const plugins = [
  commonjs(),
  nodeResolve(),
  replace({
    'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
  }),
  postcss(),
  vue(),
]; if (isProduction) {
  const prodPlugin = [
    babel({
      babelHelpers: 'bundled',
    }),
    terser(),
  ];
  plugins.push(...prodPlugin);
} else {
  const devPlugin = [
    serve({
      open: true,
      port: 8000,
      contentBase: '',
    }),
    livereload(),
  ];
  plugins.push(...devPlugin);
}

这样编译开发环境就可以直接通过指令 npm run build,编译生产模式则用 npm run serve 来执行

总结

rollup 主要用于处理 esmodule 的 js 资源,通过命令行可以直接执行,需要指定入口出口文件,以及编译的方式。

默认不被支持的资源处理需要通过 plugin,自己通过 commonjs 导出的资源使用 @rollup/plugin-commonjs,第三方库解析通过 @rollup/plugin-node-resolve,处理 css 需要 rollup-plugin-postcss,vue 得依赖 rollup-plugin-vuerollup-plugin-replace,转换和压缩离不开 @rollup/plugin-babelrollup-plugin-terser,最后通过 rollup-plugin-serverollup-plugin-livereload 开启服务。

区分环境通过 --environment 配置参数。

以上就是 Rollup 编译资源 的介绍, 更多有关 前端工程化 的内容可以参考我其它的博文,持续更新中~

Rollup 编译资源离不开 plugin的更多相关文章

  1. [转]QGis2.9在windows下的编译以及二次开发包下载

    今天心血来潮,将QGis在github上的代码更新后,又编译了一下.留意到源代码包里面的INSTALL文件有更新,于是本次编译完全基于官方的编译说明.编译过程非常顺利,除了在CMake的第一次conf ...

  2. android studio教学视频资源(点开即看)

    android studio教学视频资源(点开即看) 自从Google推出android studio之后.包含github在内的非常多第三方代码库项目很多其它的採用的android studio编译 ...

  3. [Cordova] 无法编译Visual Studio项目里Plugin副本的Native Code

    [Cordova] 无法编译Visual Studio项目里Plugin副本的Native Code 问题情景 开发Cordova Plugin的时候,开发的流程应该是: 建立Cordova Plug ...

  4. 【反编译系列】一、反编译代码(dex2jar + jd-gui)和反编译资源(apktool)

    版权声明:本文为HaiyuKing原创文章,转载请注明出处! [反编译系列]二.反编译代码(jeb) [反编译系列]三.反编译神器(jadx) [反编译系列]四.反编译so文件(IDA_Pro) 概述 ...

  5. BuildPipeline.BuildAssetBundle 编译资源包

    原文出自:http://blog.csdn.net/nateyang/article/details/7567831 1.导出.unity3d格式资源: http://game.ceeger.com/ ...

  6. DisUnity——Unity3D反编译资源提取利刃

    1.资源 软件及项目源码地址:https://github.com/ata4/disunity/releases 2.使用方法: 将待反编译的文件放入文件夹中:如:E:\Demo\ 在disunity ...

  7. Python3.6编译安装以及python开发之virtualenv与virtualenvwrapper

    Python3.6编译安装 下载python源码包 先到安装目录 cd /opt 下载源码包 wget https://www.python.org/ftp/python/3.6.2/Python-3 ...

  8. 【ProtoBuffer】windows上安装ProtoBuffer3.1.0 (附已编译资源)

    ------- 17.9.17更新  --- 以下这些方法都是扯淡,对我的机器不适用,我后来花了最后成功安装并亲测可用的方法不是靠vs编过的,vs生成的库引入后函数全部报undefine refere ...

  9. Xcode工程编译错误之iOS开发之Xcode9报错 Compiling IB documents for earlier than iOS7 is no longer supported.

    概要: 在我们升级到Xcode9时,最低的编译版本为iOS8,但是在使用一些SDK的时候就会报出Compiling IB documents for earlier than iOS7 is no l ...

  10. android 编译错误 Error:(1, 0) Plugin with id 'com.android.application' not found.

    在导入一个项目时,由于它本身的gradle版本比较高,你试用比较旧版本的gradle时就报出Plugin with id 'com.android.application' not found.的错误 ...

随机推荐

  1. 张量(Tensor)、标量(scalar)、向量(vector)、矩阵(matrix)

    张量(Tensor):Tensor = multi-dimensional array of numbers 张量是一个多维数组,它是标量,向量,矩阵的高维扩展 ,是一个数据容器,张量是矩阵向任意维度 ...

  2. union()并集intersection()交集difference()差集

    union并集,即:合并 intersection()交集 difference()差集 qs1=Course.objects.filter(price__get=240) qs2=Course.ob ...

  3. OpenAI 官宣首个 ChatGPT iOS 应用

    最近,OpenAI 宣布推出官方 iOS 应用,允许用户随时随地访问其高人气 AI 聊天机器人,此举也打破了近几个月内苹果 App Store 上充斥似是而非的山寨服务的窘境. 该应用程序是 Chat ...

  4. [安全开发] SQL注入扫描(一股子GPT味~)

    实际上大部分都是它写的,它真我哭 SQL注入扫描就是一种用于检测和预防SQL注入攻击的工具.它通过模拟SQL注入攻击的方式,向目标网站发送特定的SQL查询语句,以验证目标网站是否存在SQL注入漏洞.S ...

  5. 计算机网络 传输层协议TCP和UDP

    目录 一.传输层协议 二.tcp协议介绍 三.tcp报文格式 四.tcp三次握手 五.tcp四次挥手 六.udp协议介绍 七.常见协议和端口 八.有限状态机 一.传输层协议 传输层协议主要是TCP和U ...

  6. TypeError: this.CliEngine is not a constructor

    vue cli3 项目老是提示TypeError: this.CliEngine is not a constructor这个,看着特别扭 解决方法也不难,直接点击Details 然后再点击,如下第一 ...

  7. 小程序使用echarts 在一个页面打印多个饼图的坑

    一.下载echarts微信版 下载地址:https://github.com/ecomfe/echarts-for-weixin 或者直接云盘下载 https://pan.baidu.com/s/1i ...

  8. C++面试八股文:什么是RAII?

    某日二师兄参加XXX科技公司的C++工程师开发岗位第13面: 面试官:什么是RAII? 二师兄:RAII是Resource Acquisition Is Initialization的缩写.翻译成中文 ...

  9. Lamada List 去重及其它操作示例

    import java.util.concurrent.ConcurrentHashMap; import java.util.function.Function; import java.util. ...

  10. MySQL-this is incompatible with sql_mode=only_full_group_by 错误解决

    MySQL-this is incompatible with sql_mode=only_full_group_by 错误解决 编辑配置文件 Linux 中 :my.cnf Windows中 : m ...