学习Rollup.js打包之插件详解

import reslove from "rollup-plugin-node-resolve";

const config = {

    ...
    plugins:[
        resolve({
            mainFields:['module','main'], // module表示es6模块
            browser:true, // 在浏览器中运行
        })
    ]

}

import commmonjs from 'rollup-plugin-commonjs'

const config = {

    plugins:[
        commonjs({
            include:"node_module/**"
        })
    ]
}

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

{
    "presets": [
        "@babel/preset-env"
    ]
}

import babel from 'rollup-plugin-babel'

const config =  {

    plugins:[
        babel({
            exclude:'node_modules/**'
        })
    ]
}

npm install --save-dev rollup-plugin-eslint

module.exports = {
    'root': true,
    'env': {
        'browser': true,
        'es6': true
    },
    'extends': 'eslint:recommended',
    'parserOptions': {
        'sourceType': 'module'
    },
    'rules': {
        'indent': [
            'error',
            4
        ],
        'linebreak-style': [
            'error',
            'unix'
        ],
        'quotes': [
            'error',
            'single'
        ],
        'semi': [
            'error',
            'always'
        ]
    }
};

import eslint from 'rollup-plugin-eslint';

const const = {

    plugins:[
        eslint({
            fix: true
        })
    ]

}

import { terser } from 'rollup-plugin-terser';

const env = process.env.NODE_ENV || 'development';
const isProduction = env === 'production';

const config = {
    plugins:[]
}

if(isProduction){
    config.plugins.push(
        terser(
            include: [/^.+\.min\.js$/] // 压缩js文件
        )
    );
}

import sass from 'rollup-plugin-postcss';
import autoprefixer from 'autoprefixer';

const config = {
    plugins:[
        postcss({
            minimize: true, // 压缩
            // extract: true, //是否分离
            plugins: [autoPreFixer()]
        })
    ]
}

import json from 'rollup-plugin-json';

import pkg from './package.json';

console.log(pkg.name);

const config = {
    plugins:[
        json(),
    ]
}

import replace from 'rollup-plugin-replace';

const config = {
    plugins:[
        replace({
            include: 'src/scripts/main.js',
            ENV: JSON.stringify(env)
        }),
    ]
}

import serve from 'rollup-plugin-serve';


const env = process.env.NODE_ENV || 'development';
const isProduction = env === 'production';

const config = {
    plugins:[]
}

if(isProduction){
    config.plugins.push(
        terser()
    );
}else{
    serve({
        open: true,
        contentBase: './', // 入口文件
        historyApiFallback: true,
        host: 'localhost',
        port: 8000
    });
}

import serve from 'rollup-plugin-serve';
import livereload from 'rollup-plugin-livereload';



const env = process.env.NODE_ENV || 'development';
const isProduction = env === 'production';

const config = {
    plugins:[]
}

if(isProduction){
    config.plugins.push(
        terser()
    );
}else{
    serve({
        open: true,
        contentBase: './', // 入口文件
        historyApiFallback: true,
        host: 'localhost',
        port: 8000
    });
    livereload('lib');
}

document.write('<script src="http://' + (location.host || 'localhost').split(':')[0] + ':35729/livereload.js?snipver=1"></' + 'script>')