rollup的使用

查看rollup的使用

通过yarn rollup命令查看配置使用，-c 是打包的入口文件， -f是输出文件的格式， -o 输出文件目录， --config 指定配置文件
rollup-plugin-node-resolve 用于帮助 Rollup 解析和导入 Node.js 模块，需要导入node_moudles中的第三方模块时使用。
rollup-plugin-json 用于引用json数据，例如

import jsonData from './data.json';
console.log(jsonData);

rollup-plugin-commonjs使用commonjs规范时使用
代码拆分通过动态导入的方式,返回promise，在res中通过解构方式获取到导出的内容，配置中不能采用输出文件的方式而是应该采用输出文件夹的方式

export default {
  input: 'src/index.js',
  output: {
    // file: 'dist/bundle.js',
    // format: 'iife'
    dir: 'dist',
    format: 'amd'
  }
}

import('./logger').then(({ log }) => {
  log('code splitting~')
})

多入口打包

export default {
  // input: ['src/index.js', 'src/album.js'],
  input: {
    foo: 'src/index.js',
    bar: 'src/album.js'
  },
  output: {
    dir: 'dist',
    format: 'amd'
  }
}

commonjs和ESM规范

commonjs

// 导入模块
const math = require('./math');

// 导出模块
module.exports = {
  add: (a, b) => a + b,
  subtract: (a, b) => a - b
};

ESM

import { add, subtract } from './math';

// 导出模块
export function add(a, b) {
  return a + b;
}

export function subtract(a, b) {
  return a - b;
}
export default只能有一个，导入时不用加{}

通过书写node程序来执行打包构建命令

const { execSync } = require('child_process');
execSync(`rollup -c`)

parcel

parcel零配置，构建速度更快，parcel的入口文件支持html，可以自己安装依赖，yarn parcel build src/index.html实现生产环境打包，打包比webpack快，用了多进程打包，webpack中可以使用happypack的插件来实现这一点。