rollup

1.rollup

类似于webpack打包工具,常用于打包js文件

npm i rollup -D

// rollup.config.js
export default {
  input: './src/index.js', // 以哪个文件为打包入口
  output: {
    file: 'dist/umd/vue.js', // 出口
    name: 'Vue', // 打包后的全局变量名字
    format: 'umd', // 统一模块规范
    sourcemap: true, // es6 -> es5. 开启代码调试 可以找到源代码中的报错位置
  },
}

2.rollup-plugin-babel

桥梁 => 关联babel

npm i rollup=plugin-bable -D

// rollup.config.js
import babel from 'rollup-plugin-babel';
export default{
  ...
  plugins: [
    babel({
      exclude: 'node_modeles/**' // 忽略文件
    })
  ]
}

3.rollup-plugin-serve

设置静态服务 => 本地启动静态服务

npm i rollup-plugin-serve -D

//rollup.config.js
import serve from 'rollup-plugin-serve';
export default{
  ...
  plugins: [
    serve({
      open: true, // 自动打开
      openPage: '/public/index.html', // 默认打开路径
      port: 3000,// 端口号
      contentBase: ''
    })
  ]
}

4.rollup-plugin-postcss

处理scss文件,另需要安装node-sass

npm i rollup-plugin-postcss node-sass -D

// rollup.config.js
import postcss from 'rollup-plugin-postcss';

export default {
  ...
  plugins:[
    postcss({
      extract: 'css/vogso.css', // 输出路径
      inject: true,
      minimize: isProductionEnv,
      extensions: ['css', 'scss']
    }),
  ]
}

5.rollup-plugin-livereload

实现实时刷新页面

npm i rollup-plugin-livereload -D

// rollup.config.js
import livereload from 'rollup-plugin-livereload';

export default {
  ...
  plugins:[
    livereload()
  ]
}

6.rollup-plugin-uglify

打包代码压缩

npm i rollup-plugin-uglify -D

// rollup.config.js
import { uglify } from 'rollup-plugin-uglify';

export default {
  ...
  plugins:[
    uglify()
  ]
}

7.rollup-plugin-eslint

使用eslint,另需要安装

npm i rollup-plugin-eslint -D

// rollup.config.js
import { eslint } from 'rollup-plugin-eslint';

export default {
  ...
  plugins:[
    eslint({
      include: ['src/**/*.js'] // eslint检查范围
    }),
  ]
}

// .eslintrc.js
module.exports = {
  root: true,
  parserOptions: {
    parser: 'babel-eslint',
    sourceType: 'module'
  },
  env: {
    browser: true,
    node: true,
    es6: true,
    jquery: true 
  },
  extends: ['eslint:recommended'],
  rules: {
    "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
    "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
    "no-param-reassign": 1,
    // "no-unused-expressions": 1,
    "no-unused-vars": 1,
    "no-control-regex": 0,
    "no-plusplus": 0,
    semi: [2, "always"],
    "comma-dangle": 0,
    allowKeywords: 0,
    "quote-props": 0,
  }
}

忽略检测文件.eslintignore(非必需)

//.eslintignore
public
dist

8.rollup-plugin-json

可以读取json文件比如package.json

npm i 'rollup-plugin-json -D

// rollup.config.js
import json from 'rollup-plugin-json';

export default {
  ...
  plugins:[
    json()
  ]
}

例:

// index.js
import pjson from '../package.json';
const VER = pjson.version;

---

全部使用

// rollup.config.js
import babel from 'rollup-plugin-babel';
import serve from 'rollup-plugin-serve';
import postcss from 'rollup-plugin-postcss';
import livereload from 'rollup-plugin-livereload';
import { uglify } from 'rollup-plugin-uglify';
import { eslint } from 'rollup-plugin-eslint';
import json from 'rollup-plugin-json';

const ENV = process.env.ENV;
const isProductionEnv = ENV === 'production';

export default {
  input: './src/index.js',
  output: {
    file: 'dist/vogso.js',
    name: 'Vogsojs',
    format: 'umd',
    sourcemap: true
  },
  plugins: [
    babel({
      exclude: 'node_modeles/**'
    }),
    process.env.ENV === 'development' ? serve({
      open: !true,
      openPage: '/public/index.html',
      port: 3001,
      contentBase: ''
    }) : uglify(),
    postcss({
      extract: 'css/vogso.css', // 输出路径
      inject: true,
      minimize: isProductionEnv,
      extensions: ['css', 'scss']
    }),
    livereload(),
    eslint({
      include: ['src/**/*.js']
    }),
    json()
  ]
};