前面讲过了，rollup如何打包开发环境。现在肯定是打包成生产环境了。本次需要实现的功能是把库打包成生产环境。由于本次代码是基于前两次的基础上的，如果有问题的还请移步前两节。 （实战 rollup 第一节入门） （rollup 实战第二节 搭建开发环境）

打包生umd, cjs, esm的文件

• vue 源码打包的分为以下几种(umd, cjs, esm)

• react 源码打包也是上面的三种（umd, cjs, esm）

• 所有的学习都是从模仿开始，那咋们也来配置一下，打包成这三种类型的js.

打包简单代码

既然要使用rollup, 那肯定是需要安装rollup这个打包工具的，如果已经全局安装的请忽略，个人是局部安装的， npm install rollup -D, 然后在package.json中的script中加入 打包的命令 "build": "rollup -c ./build/rollup.config.js",然后在根目录下面建立 build文件夹

配置文件

这里的配置文件其实很简单，既然rollup的output属性配置的是一个对象，那么我配置成一个数组，里面包含多个输出对象，那不就有了。

在build目录下面，建立一个名称叫做 rollup.build.js的文件，然后放入以下代码：

export default {
  input: 'src/index.js', // 打包的内容，自己随便写一些简单的代码
  output: [
    {
      file: 'dist/cjs/index.js', // 打包成commonjs
      format: 'cjs'
    },
    {
      file: 'dist/esm/index.js', // 打包成esmodule
      format: 'esm'
    },
    {
      file: 'dist/index.js',
      format: 'umd',
      name: 'index' // umd 规范，一定要有一个名字，不然打包报错
    },
  ]
};
复制代码

效果

执行 npm run build ，然后在src同层目录下面就会生成一个dist文件夹，内容如下:

测试效果

对于如何测试本地的包，我在上篇文章说明了，请移步 npm 如何测试自己本地的包，这里就看效果就行，这个代码也是上一次测试本地链接里面的代码。

打包现代代码

现代代码就是在原有的基础上，加了es6以后的 promise, async, await, 生成器，类等，这些代码需要进行代码转译的。

转译es的代码，大家都知道需要使用babel。但是rollup在转译代码方面官方做了一个插进，叫做 @rollup/plugin-babel,转译现代化代码。需要安装一下包。 npm install @rollup/plugin-babel @babel/core @babel/plugin-transform-runtime @babel/preset-env @babel/runtime-corejs3 @rollup/plugin-babel -D, 对于这些包的具体使用以及作用，请查看

接下来在rollup.config.js 加上插件属性,配置文件添加以下代码：

import babel from '@rollup/plugin-babel'; // 导入babel
{
...
// 使用插件
plugins: [
    babel({
      exclude: 'node_modules/**', // 防止打包node_modules下的文件
      babelHelpers: 'runtime',      // 使plugin-transform-runtime生效
      // 使用预设
      presets: [['@babel/preset-env', {
        "modules": false,
        "useBuiltIns": "usage",
        // 目标浏览器
        "targets": {
          "edge": '17',
          "firefox": '60',
          "chrome": '67',
          "safari": '11.1',
          'ie': '10',
        },
      }]],
      plugins: [
        //  多次导入的文件，只导入一次
        ['@babel/plugin-transform-runtime']],
    })
  ]
  }
复制代码

带着愉快的心情来打包代码，npm run build 结果如下：

这一张报错信息告诉我们两个问题，

QUS1 缺少依赖 core-js

人家都告诉咋们怎么弄了，直接安装包就好。 npm install --save core-js@3

然后在 "useBuiltIns": "usage",下面加入以下配置（由于本人安装的版本是3.15.2，所以我的值就是3.15.2,各位同学请结合实际情况来配置）

 "corejs": "3.15.2",
复制代码

QUS2 有一堆的转译包找不到

看到这个问题，最好的方法就是去看那些打包好的文件。

我打包好的文件，那些转译的包都没有引入进来，怎么使用也是报错。

解决办法

安装以下两个包: npm install @rollup/plugin-node-resolve @rollup/plugin-commonjs

• @rollup/plugin-node-resolve: 让rollup可以找到node环境的其他依赖
• @rollup/plugin-commonjs : 将commonJS代码转译成 esmodule的代码

然后修改配置文件：

import commonjs from '@rollup/plugin-commonjs';
import { nodeResolve } from '@rollup/plugin-node-resolve';
{
...
plugins:[
    nodeResolve(),
    commonjs(),
]
}
复制代码

那咋们继续来打包。

在这里肯定有的人要说话了，为啥一点点代码，打包后却增加了这么多代码，因为本人在代码里面 使用了 类，promise, async, await, 并且还要兼容ie10， 作为一个包，肯定是能满足越多的人越好,一般的包都会支持这些的。

测试

这里的测试，咋们直接建立html文件，然后在外部使用 dev环境来测试

ie10中查看效果

恭喜你，同学，也恭喜我自己，到了这一步。一些基本的库的打包方式就已经好了。如何发布到npm, 请查看其他的博客。我这还没有完呢

加入ts

许多包都是用ts来写的，有关ts的相关请查看我的专栏，这里不做过多的解释。

要使用ts来开发代码，咋们必须要安装ts才行，所以安装以下库：npm install typescript rollup-plugin-typescript2 tslib

• typescript: ts的代码库

• rollup-plugin-typescript2 ： 这个库比官方的那个@rollup/plugin-typescript的下载量多好几倍，肯定选它

• tslib:rollup-plugin-typescript2一起使用的库。 这是TypeScript的运行时库，包含所有TypeScript帮助函数 。类似 babel-core 与 babel的关系。

修改配置文件 配置文件做以下修改：

import typescript from 'rollup-plugin-typescript2';
{
...
plugins:[
     typescript({
     // 使用tsconfig.json的配置文件
      tsconfig: "tsconfig.json",
      // 默认声明文件放到一个文件夹中
      useTsconfigDeclarationDir: true
    }),
    ...
]
}
复制代码

配置tsconfig.json

在 src同级目录下面添加tsconfig.json,内容根据自己实际的情况添加，我这里给一个案例 ，如下：

{
  "compilerOptions": {
   // ts编译的目标文件，我这里编译成es6， 然后交给babel
    "target": "ES2017",
    // 使用最新的语法 
    "module": "esnext",
    // 库使用dom， dom可迭代
    "lib": ["ESNext", "DOM", "DOM.Iterable"],
    // 模块解析策略是node
    "moduleResolution": "node",
    // 开启es与其他模块的交互
    "esModuleInterop": true,
    // 开启严格模式
    "strict": true,
    //  开启声明文件的输出
    "declaration": true,
    // 允许导入json模块
    "resolveJsonModule": true,
    // 跳过库的检查
    "skipLibCheck": true,
    "noUnusedLocals": true,
    // 开启声明文件输出目录
    "declarationDir": "./dist/types/"
  },
  // 只编译src目录下面的文件
  "include": [
    "./src"
  ]
}
复制代码

配置完后 ，我们来打包。npm run build:

通过这张图，我们发现一个问题，代码比变少了，是es6的代码。这个代码肯定是不能在ie上使用的。那就是babel没有生效了？

解决办法

我们的ts转移后又没有输出，babel默认是不会对.ts文件后缀名进行转译的，所以我们需要加一个添加转译名。

{
...
puligins:[
    babel({
        // 解析 拓展名为ts的文件
      extensions: [
        '.ts'
      ],
    })
]
}
复制代码

这样打包就行了。是不是很简单，但是你看到的简单，往往在写代码的时候需要写好几遍。测试的效果就不看了，和上面是一样的。

压缩代码

我们会发现，目前打出的包是没有对代码进行压缩的，上面的方式代码的可读性还是比较强的，所以接下来对代码就行压缩

npm install rollup-plugin-terser -D 然后在最好使用这个插件就行。

效果

详细代码，请查看github.com/cll123456/m…