rollup超简介绍 及 应用配置搭建

Rollup

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

应用简介

rollup使用很简单，它不需要像webpack那样进行繁琐的配置

首先全局安装，然后只需要指定入口文件和格式化方式就能直接使用

再加一个文件出口路径，就可以生成打包文件

• 全局安装rollup

  npm i -g rollup

• 命令行直接编译文件(结果会直接显示在终端)

  rollup --input src/index.js --format cjs

  rollup -i src/index.js -f cjs 简写

  rollup src/index.js -f cjs 省略入口-i标志

• 编译打包文件

  rollup src/index.js -f cjs --file dist/bundle.js

  rollup src/index.js -f cjs -o dist/bundle.js

• 使用配置文件和插件

  rollup --config rollup.config.js

  rollup -c ./build/rollup.config.js

  -c后面跟配置文件，是根目录下的 rollup.config.js时，可以省略

    // 配置文件一般形式如下：
    module.export = {
      input: 'src/index.js',
      output: {
        file: 'dist/bundle.js',
        format: 'cjs', // amd、cjs、es、iife、umd
      },
      plugins: [
  
      ]
    }
  

示例

安装依赖

// 创建文件夹
mkdir rollup-demo && cd rollup-demo

// 创建package.json
npm init -y

// 安装rollup (最新版是1.21.0，使用有点问题，暂用1.20.3)
npm i -D rollup@1.20.3

// 安装es6模块插件
npm i -D rollup-plugin-babel @babel/core @babel/preset-env

// class 与 属性
npm i -D @babel/plugin-transform-classes @babel/plugin-proposal-class-properties

// 开发环境 安装serve 和 热加载 插件
npm i -D rollup-plugin-serve rollup-plugin-livereload

// 生产环境 安装压缩代码插件(不用uglify，因为不能指定压缩文件)
npm i -D rollup-plugin-terser

// css处理
npm i -D rollup-plugin-postcss

// 合起来，一个命令
npm i -D rollup@1.20.3 rollup-plugin-babel @babel/core @babel/plugin-transform-classes  @babel/preset-env @babel/plugin-proposal-class-properties rollup-plugin-serve rollup-plugin-livereload rollup-plugin-terser rollup-plugin-postcss

配置文件

在package.json中添加命令

  "dev": "rollup -w -c ./build/rollup.config.dev.js",
  "build": "rollup -c ./build/rollup.config.prod.js"

创建一个build文件夹，在里面建三个配置文件

• 基础配置./build/rollup.config.js

    const path = require('path');
    const postcss = require('rollup-plugin-postcss')
    const babel = require('rollup-plugin-babel');
  
    const resolveFile = function(filePath) {
      return path.join(__dirname, '..', filePath)
    }
  
    const isProductionEnv = process.env.NODE_ENV === 'production'
  
    module.exports = [
      {
        input: resolveFile('src/index.js'),  // 入口文件
        output: [{
          file: resolveFile('dist/index.js'), // 输出 JS 文件
          format: 'umd',
          name: 'Demo'
        },{
          file: resolveFile('dist/index.min.js'), // 输出 JS 压缩文件
          format: 'umd',
          name: 'Demo'
        },{
          file: resolveFile('dist/index.es.js'), // 输出 JS es 文件
          format: 'es'
        }],
        plugins: [                          // 插件
          postcss({
            extract: resolveFile('dist/index.css'),
            minimize: isProductionEnv,
          }),
          babel() // 编译 es6+, 配合 .babelrc 文件
        ],
      },
    ]
  

• 开发模式./build/rollup.config.dev.js

    process.env.NODE_ENV = 'development';
  
    const path = require('path');
    const serve = require('rollup-plugin-serve');
    const configList = require('./rollup.config');
    const livereload = require('rollup-plugin-livereload');
  
    const resolveFile = function(filePath) {
      return path.join(__dirname, '..', filePath)
    }
    const PORT = 3000;
  
    configList.map((config, index) => {
  
      config.output.sourcemap = true;
  
      if( index === 0 ) {
        config.plugins = [
          ...config.plugins,
          ...[
            livereload({ // 启动重载，并且监听dist目录
              watch: resolveFile('dist'),
              // port: 35729  // default。 同时启动两个项目时，要修改此端口
            }),
            serve({
              port: PORT,
              contentBase: [resolveFile('example'), resolveFile('dist')], 
              // contentBase: [resolveFile('')],
              open: true,
              verbose: true,                   // 打印输出 serve路径
            })
          ]
        ]
      }
  
      return config;
    })
  
    module.exports = configList;
  

• 生产模式./build/rollup.config.prod.js

    process.env.NODE_ENV = 'production';
  
    const {terser} = require('rollup-plugin-terser');
  
    const postcss = require('rollup-plugin-postcss')
    const configList = require('./rollup.config');
  
    const resolveFile = function(filePath) {
      return path.join(__dirname, '..', filePath)
    }
  
    configList.map((config, index) => {
  
      config.output.sourcemap = false;
      config.plugins = [
        ...config.plugins,
        ...[
          terser({  // 只压缩 *.min.js文件
            include: [/^.+\.min\.js$/, '*esm*'], 
            exclude: [ 'some*' ]
          })
        ]
      ]
  
      return config;
    })
  
    module.exports = configList;
  

项目文件

• 创建.babelrc文件

  {
    "presets": [
      ["@babel/preset-env", { "modules": false }]
    ],
    "plugins": [
      ["@babel/plugin-proposal-class-properties", {
        "loose": true
      }],
      ["@babel/plugin-transform-classes", {
        "loose": true
      }]
    ]
  }

• 创建 src/index.js 文件作为入口文件

  import './index.css'
  class Demo {
    constructor() {
      this.name = 'zhang san'
      this.age = 18
      document.write(`
${this.name}
`)
      document.write(`
${this.age}
`)
    }
    changeName() {
      this.name = 'li si'
      document.write(`
${this.name}
`)
    }
    changeAge = () => {
      this.age = 28
      document.write(`
${this.age}
`)
    }
  }

  export default Demo;

• 创建 example/index.html 作为开发示例页面

• 使用sass

  npm i -D node-sass

  已经装了postcss，sass在这可以直接用

• 使用eslint

  npm i -D rollup-plugin-eslint eslint-config-airbnb-base eslint-plugin-import

  添加.eslintrc文件

  修改rollup.config.dev.js文件

  const {eslint} = require('rollup-plugin-eslint')
  ...
  ...
  config.plugins = [
    ...config.plugins,
    ...[
      eslint(),               // 添加eslint插件
      livereload({...})
    ]
  ]
  ...
  

  创建.eslintrc和.eslintignore

  // .eslintrc
  {
    "extends": "airbnb-base",
    "env": {
      "browser": true
    },
    "rules": {
      "import/extensions": ["error", "always", {
        "js": "never",
        "vue": "never"
      }],
      "semi": ["error", "never"],
      "comma-dangle": ["error", {
        "arrays": "always-multiline",
        "objects": "always-multiline",
        "imports": "always-multiline",
        "exports": "always-multiline",
        "functions": "ignore"
      }],
      "no-underscore-dangle": "off",
      "import/prefer-default-export": "off",
      "class-methods-use-this": "off",
      "object-curly-newline": ["error", {
        "minProperties": 3,
        "consistent": true
      }],
      "no-multiple-empty-lines": ["error", { "max": 1, "maxEOF": 1 }],
      "linebreak-style": [0, "error", "windows"],
      "no-param-reassign": ["error", { "props": false }],
      "array-bracket-spacing": ["error", "always", {
        "objectsInArrays": false,
        "arraysInArrays": false
      }],
      "max-len": ["error", {
        "code": 200,
        "ignoreUrls": true,
        "ignoreComments": true
      }]
    }
  }
  
  // .eslintignore
  .git
  .idea
  .vscode
  build
  dist
  node_modules
  

现在执行npm run dev试试，修改一下src/index.js中的报错吧

其他

• 插件

  rollup众多功能都是通过插件扩展的，插件名称一般形如：rollup-plugin-xxxx，可以在npm网站搜索需要的功能插件

• livereload （热加载与服务）

  serve({
    port: 3000,
    open: true,
  }),
  livereload({
    watch: 'dist',
    port: 35729
  })

  // livereload这里有个默认端口 35729，issue里有提到
  // 同时启动了两个的时候会报错，端口冲突，这里最好给它一个端口
  
  // 开发用的时serve端口，而不是livereload的

• eslint
  有点问题，没处理好，有朋友处理好了，麻烦告诉我一下
• rollup版本
  新版本多文件输出时有点问题，跟现在配置不一样
• 其他资料
  小书： https://chenshenhai.github.io/rollupjs-note/