rollup相关内容

一、rollup初次使用

首先新建一个rollup.config.js文件，内部使用es6的方式导出。

1、rollup.config.js中

export default {
    input: 'src/index.js', // 入口文件
  output: { // 输出内容
      file: './dist/bundle.js', // 输出的文件名和路径
    format: 'cjs', //输出的格式一共有物种格式
    name: 'bundleName' // 当format为iife和umd时必须提供，作为全局变量挂载window上
  }
}

format的五种格式：

• AMD：异步加载模块。
• ES6：module是es6提供的新的模块化方案。
• IIFE：立即执行函数表达式，所谓立即执行就是声明一个函数，声明完成就马上执行。
• UMD：通用模块定义。
• CJS：是nodejs采用的模块化标准，commonjs使用方法，使用require引入，接收模块名或者模块路径。

  package.json中

  {
  "scripts": {
    "build": "rollup --config"
  }
  }

  2、支持babel

  需要安装以下插件：

  npm install rollup-plugin-babel @babel/core @babel/preset-env --save-dev

  .babelrc

  {
  "presets": [
    [
      "@babel/env",
      {
        "modules":false
      }
    ]
  ]
  }
  

  rollup.config.js

  import babel from 'rollup-plugin-babel';
  export default {
    plugins: [
      babel({
        exclude: 'node_modules/**'
    })
  ]
  }
  

  3、支持tree-shaking

  Tree-shaking的本质是消除无用代码。rollup只处理函数和顶层的import/export变量。

  4、使用第三方模块

  rollup只能编译源码中的模块引入默认支持ES6+的模块方式（import/export）的方式。

  需要安装两个插件来进行抹平，需要安装插件如下：

  npm install @rollup/plugin-node-resolve @rollup/plugin-commonjs @rollup/plugin-replace --save-dev
  

  rollup.config.js中

  import { nodeResolve } from '@rollup/plugin-node-resolve';
  import commonjs from '@rollup/plugin-commonjs';
  export default {
    plugins: [
      nodeResolve({
        extensions: ['.js', '.ts']
    }),
    commonjs(),
    replace({
        'process.env.NODE_ENV': JSON.stringify('production')
    })
  ]
  }
  

  5、使用CDN方式引入第三方库

  rollup.config.js中

  export default {
  output: {
    globals: {
      lodash: '_', // 告诉rollup，全局变量_就是lodash
      jquery: '$',// 告诉rollup，全局变量$就是jquery
    }
  },
  externals: ['lodash', 'jquery']
  }
  

  6、使用typescript

  安装依赖如下：

  npm install typescript rollup-plugin-typescript2 --save-dev
  

  rollup.config.js中

  import ts from 'rollup-plugin-typescript2';
  export default {
    plugins: [
      ts({
        tsconfig: path.resolve(__dirname, 'tsconfig.json');
    })
  ]
  }
  

  使用tsc —init生成tsconfig.json文件

  {
  "compilerOptions": {  
    "target": "es5",                          
    "module": "ESNext",                     
    "strict": true,                         
    "skipLibCheck": true,                    
    "forceConsistentCasingInFileNames": true 
  }
  }
  

  7、压缩js

  terser是支持ES6+的Javascript压缩工具包，安装如下：

  npm install rollup-plugin-terser --save-dev
  

  rollup.config.js中

  import {terser} from 'rollup-plugin-terser';
  export default {
    plugins: [
      terser()
  ]
  }
  

  8、本地服务器

  安装插件

  npm install rollup-plugin-serve --save-dev
  

  rollup.config.js中

  import serve from 'rollup-plugin-serve';
  export default {
    plugins: [
      serve({
        open: true,
      port: 8080,
      contentBase: './dist'
    })
  ]
  }