Rollup.js

Rollup 是一个 JavaScript 模块打包器，可以将小块代码编译成大块复杂的代码，例如 library 或应用程序。

Rollup 对代码模块使用新的标准化格式，这些标准都包含在 JavaScript 的 ES6 版本中，而不是以前的特殊解决方案，如 CommonJS 和 AMD。ES6 模块可以使你自由、无缝地使用你最喜爱的 library 中那些最有用独立函数，而你的项目不必携带其他未使用的代码。ES6 模块最终还是要由浏览器原生实现，但当前 Rollup 可以使你提前体验

Tree-shaking

除了使用 ES6 模块之外，Rollup 还静态分析代码中的 import，并将排除任何未实际使用的代码。这允许您架构于现有工具和模块之上，而不会增加额外的依赖或使项目的大小膨胀。

使用common.js 的时候必须导入完整的工具（tool）或者包（library）
esm可以做到按需导入，只导入需要的方法和函数

为什么esm可以做到tree-shaking

import 只能作为模块顶层的语句出现，不能出现在 function 里面或是 if 里面。
import 的模块名只能是字符串常量。
不管 import 的语句出现的位置在哪里，在模块初始化的时候所有的 import 都必须已经导入完成。
import binding 是 immutable 的，类似 const。比如说你不能 import { a } from ‘./a’ 然后给 a 赋值个其他什么东西。

为什么CMD不能tree-shaking

为什么CMD不能使用tree shake

因为Common.js 是动态引入的，所有只有在运行的时候才可以知道这个模块内的方法和数据是不是引入。ES module 是静态引入的，所以在代码的编译阶段就可以判断有没有使用。所以可以在编译的时候将没有使用的引入删除

配置环境变量

mac安装rollup.js的时候，安装成功后但是提示找不到rollup.当时就想到是不是全局变量没有添加上去。

因为以前都是用的window电脑，所以mac电脑不是很熟悉。做一个简单的记录。

先找到rollup的路径

npm 的全局/usr/local/lib/node_modules
Shift + Command + G // 查找路径
option + command + c // 复制路径
open ~/.zshrc // 打开配置文件
在打开的文件中加入rollup的路径
最后 source ~/.zshrc 搞定，完工

插件

需要安装的插件

import json from 'rollup-plugin-json'; // 解析json

import serve from 'rollup-plugin-serve'; // 本地服务器

import nodeResolve from 'rollup-plugin-node-resolve'; // 用来查找外部moudle

import vuePlugin from 'rollup-plugin-vue' // 处理vue文件

import htmlTemplate from 'rollup-plugin-generate-html-template'; // html模板 import commonjs from 'rollup-plugin-commonjs'; // 用来解析有些plugin 不支持esm

import replace from '@rollup/plugin-replace';

文件路径

rollup-demo
├─ package-lock.json 
├─ package.json // 安装包json
├─ readme.md
├─ rollup.config.js // 配置文件
└─ src
       ├─ foo.js
       ├─ main.js // 入口文件
       └─ views  
              └─ App.vue

// rollup.config.js  配置写
const path = require('path'); //  导入的路径
// const buble = require('@rollup/plugin-buble');
const resolve = function (filePath) {
  return path.join(__dirname, filePath)
}
export default {
  input: 'src/main.js',  // 入口文件
  // 输出文件
  output: {
    file: resolve('dist/index.js'), // 输出文件名字
    format: 'cjs',  // https://juejin.cn/post/6844903974236389389  介绍的很清楚
    footer: '/* follow me on Twitter! @rich_harris   */',   // 在bundele.js 文件的头部添加信息
    banner: '/* my-library version */', // 在bundele.js 文件底部添加信息
    // globals: { // 全局变量
    //   Vue: 'Vue'
    // }
  },
  // 插件注册
  plugins: [
    json(),
    htmlTemplate({
      template: "index.html",
      target: 'dist/index.html',
    }),
    nodeResolve(),
    // commonjs({
    //   // include: 'node_modules/**',
    // }),
    replace({
      'process.env.NODE_ENV': JSON.stringify('development'),
      'process.env.VUE_ENV': JSON.stringify('browser')
    }),
    vuePlugin(),
    serve({
      headers: {
        'Access-Control-Allow-Origin': '*',  // 请求头
        foo: 'bar'
      },
      contentBase: ['public', 'dist'],
      host: 'localhost', // 主机地址
      port: 3000,
      open: true,  // 自动打开浏览器

    })
  ],
  // 全局模块
  // globals: {
  //   jquery: '$'
  // }
};

命令行参数

-i, --input <filename>      要打包的文件（必须）
-o, --file <output>         输出的文件 (如果没有这个参数，则直接输出到控制台)
-f, --format <format>       输出的文件类型 (amd, cjs, esm, iife, umd)
-e, --external <ids>        将模块ID的逗号分隔列表排除
-g, --globals <pairs>       以`module ID:Global` 键值对的形式，用逗号分隔开 
                              任何定义在这里模块ID定义添加到外部依赖
-n, --name <name>           生成UMD模块的名字
-h, --help                  输出 help 信息
-m, --sourcemap             生成 sourcemap (`-m inline` for inline map)
--amd.id                    AMD模块的ID，默认是个匿名函数
--amd.define                使用Function来代替`define`
--no-strict                 在生成的包中省略`"use strict";`
--no-conflict               对于UMD模块来说，给全局变量生成一个无冲突的方法
--intro                     在打包好的文件的块的内部(wrapper内部)的最顶部插入一段内容
--outro                     在打包好的文件的块的内部(wrapper内部)的最底部插入一段内容
--banner                    在打包好的文件的块的外部(wrapper外部)的最顶部插入一段内容
--footer                    在打包好的文件的块的外部(wrapper外部)的最底部插入一段内容
--interop                   包含公共的模块（这个选项是默认添加的）

rollup.js 学习笔记