前端架构师成长计划

rollup实战 #

rollupjs是下一代ES模块捆绑器
1 背景 #
webpack打包非常繁琐，打包体积比较大
rollup主要是用来打包JS库的
vue/react/angular都在用rollup作为打包工具

2. 安装依赖 #

cnpm i @babel/core @babel/preset-env  @rollup/plugin-commonjs @rollup/plugin-node-resolve @rollup/plugin-typescript lodash rollup rollup-plugin-babel postcss rollup-plugin-postcss rollup-plugin-terser tslib typescript rollup-plugin-serve rollup-plugin-livereload -D

3 初次使用 #

3.1 rollup.config.js #

Asynchronous Module Definition异步模块定义
ES6 module是es6提出了新的模块化方案
IIFE(Immediately Invoked Function Expression)即立即执行函数表达式，所谓立即执行，就是声明一个函数，声明完了立即执行
UMD全称为Universal Module Definition,也就是通用模块定义
cjs是nodejs采用的模块化标准，commonjs使用方法require来引入模块,这里require()接收的参数是模块名或者是模块文件的路径

rollup.config.js

export default {
    input:'src/main.js',
    output:{
        file:'dist/bundle.cjs.js',//输出文件的路径和名称
        format:'cjs',//五种输出格式：amd/es6/iife/umd/cjs
        name:'bundleName'//当format为iife和umd时必须提供，将作为全局变量挂在window下
    }
}

3.2 src\main.js #

src\main.js

console.log('hello');

3.3 package.json #

package.json

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

3.4 dist\index.html #

dist\index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>rollup</title>
</head>
<body>
    <script src="bundle.cjs.js"></script>
</body>
</html>

4 支持babel #

为了使用新的语法，可以使用babel来进行编译输出

4.1 安装依赖 #

@babel/core是babel的核心包
@babel/preset-env是预设
@rollup/plugin-babel是babel插件

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

4.2 src\main.js #

let sum = (a,b)=>{
    return a+b;
}
let result = sum(1,2);
console.log(result);

4.3 .babelrc #

.babelrc

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

4.4 rollup.config.js #

rollup.config.js

+import babel from '@rollup/plugin-babel';
export default {
    input:'src/main.js',
    output:{
        file:'dist/bundle.cjs.js',//输出文件的路径和名称
        format:'cjs',//五种输出格式：amd/es6/iife/umd/cjs
        name:'bundleName'//当format为iife和umd时必须提供，将作为全局变量挂在window下
    },
+   plugins:[
+       babel({
+           exclude:"node_modules/**"
+       })
+   ]
}

5 tree-shaking #

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

5.1 src\main.js #

src\main.js

import {name,age} from './msg';
console.log(name);

5.2 src\msg.js #

src\msg.js

export var name = 'zhufeng';
export var age = 12;

6 使用第三方模块 #

rollup.js编译源码中的模块引用默认只支持 ES6+的模块方式import/export

6.1 安装依赖 #

cnpm install @rollup/plugin-node-resolve @rollup/plugin-commonjs lodash  --save-dev

6.2 src\main.js #

src\main.js

import _ from 'lodash';
console.log(_);

6.3 rollup.config.js #

rollup.config.js

import babel from 'rollup-plugin-babel';
+import resolve from '@rollup/plugin-node-resolve';
+import commonjs from '@rollup/plugin-commonjs';
export default {
    input:'src/main.js',
    output:{
        file:'dist/bundle.cjs.js',//输出文件的路径和名称
        format:'cjs',//五种输出格式：amd/es6/iife/umd/cjs
        name:'bundleName'//当format为iife和umd时必须提供，将作为全局变量挂在window下
    },
    plugins:[
        babel({
            exclude:"node_modules/**"
        }),
+       resolve(),
+       commonjs()
    ]
}

7 使用CDN #

7.1 src\main.js #

src\main.js

import _ from 'lodash';
import $ from 'jquery';
console.log(_.concat([1,2,3],4,5));
console.log($);
export default 'main';

7.2 dist\index.html #

dist\index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>rollup</title>
</head>
<body>
    <script src="https://cdn.jsdelivr.net/npm/lodash/lodash.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/jquery/jquery.min.js"></script>
    <script src="bundle.cjs.js"></script>
</body>
</html>

7.3 rollup.config.js #

rollup.config.js

import babel from 'rollup-plugin-babel';
import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
export default {
    input:'src/main.js',
    output:{
        file:'dist/bundle.cjs.js',//输出文件的路径和名称
+       format:'iife',//五种输出格式：amd/es6/iife/umd/cjs
+       name:'bundleName',//当format为iife和umd时必须提供，将作为全局变量挂在window下
+       globals:{
+           lodash:'_', //告诉rollup全局变量_即是lodash
+           jquery:'$' //告诉rollup全局变量$即是jquery
+       }
    },
    plugins:[
        babel({
            exclude:"node_modules/**"
        }),
        resolve(),
        commonjs()
    ],
+   external:['lodash','jquery']
}

8 使用typescript #

8.1 安装 #

cnpm install tslib typescript @rollup/plugin-typescript --save-dev

8.2 src\main.ts #

src\main.ts

let myName:string = 'zhufeng';
let age:number=12;
console.log(myName,age);

8.3 rollup.config.js #

rollup.config.js

import babel from 'rollup-plugin-babel';
import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
+import typescript from '@rollup/plugin-typescript';
export default {
+   input:'src/main.ts',
    output:{
        file:'dist/bundle.cjs.js',//输出文件的路径和名称
        format:'iife',//五种输出格式：amd/es6/iife/umd/cjs
        name:'bundleName',//当format为iife和umd时必须提供，将作为全局变量挂在window下
        globals:{
            lodash:'_', //告诉rollup全局变量_即是lodash
            jquery:'$' //告诉rollup全局变量$即是jquery
        }
    },
    plugins:[
        babel({
            exclude:"node_modules/**"
        }),
        resolve(),
        commonjs(),
+       typescript()
    ],
    external:['lodash','jquery']
}

8.4 tsconfig.json #

tsconfig.json

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

9 压缩JS #

terser是支持ES6 +的JavaScript压缩器工具包

9.1 安装 #

cnpm install rollup-plugin-terser --save-dev

9.2 rollup.config.js #

rollup.config.js

import babel from 'rollup-plugin-babel';
import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import typescript from '@rollup/plugin-typescript';
+import {terser} from 'rollup-plugin-terser';
export default {
    input:'src/main.ts',
    output:{
        file:'dist/bundle.cjs.js',//输出文件的路径和名称
        format:'iife',//五种输出格式：amd/es6/iife/umd/cjs
        name:'bundleName',//当format为iife和umd时必须提供，将作为全局变量挂在window下
        globals:{
            lodash:'_', //告诉rollup全局变量_即是lodash
            jquery:'$' //告诉rollup全局变量$即是jquery
        }
    },
    plugins:[
        babel({
            exclude:"node_modules/**"
        }),
        resolve(),
        commonjs(),
        typescript(),
+       terser(),
    ],
    external:['lodash','jquery']
}

10 编译css #

terser是支持ES6 +的JavaScript压缩器工具包

10.1 安装 #

cnpm install  postcss rollup-plugin-postcss --save-dev

10.2 rollup.config.js #

rollup.config.js

import babel from 'rollup-plugin-babel';
import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import typescript from '@rollup/plugin-typescript';
import {terser} from 'rollup-plugin-terser';
+import postcss from 'rollup-plugin-postcss';
export default {
    input:'src/main.js',
    output:{
        file:'dist/bundle.cjs.js',//输出文件的路径和名称
        format:'iife',//五种输出格式：amd/es6/iife/umd/cjs
        name:'bundleName',//当format为iife和umd时必须提供，将作为全局变量挂在window下
        globals:{
            lodash:'_', //告诉rollup全局变量_即是lodash
            jquery:'$' //告诉rollup全局变量$即是jquery
        }
    },
    plugins:[
        babel({
            exclude:"node_modules/**"
        }),
        resolve(),
        commonjs(),
        typescript(),
        //terser(),
+       postcss()
    ],
    external:['lodash','jquery']
}

10.3 src\main.js #

src\main.js

import './main.css';

10.4 src\main.css #

src\main.css

body{
    background-color: green;
}

11 本地服务器 #

11.1 安装 #

cnpm install rollup-plugin-serve --save-dev

11.2 rollup.config.dev.js #

rollup.config.dev.js

import babel from 'rollup-plugin-babel';
import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import typescript from '@rollup/plugin-typescript';
import postcss from 'rollup-plugin-postcss';
+import serve from 'rollup-plugin-serve';
export default {
    input:'src/main.js',
    output:{
        file:'dist/bundle.cjs.js',//输出文件的路径和名称
        format:'iife',//五种输出格式：amd/es6/iife/umd/cjs
        name:'bundleName',//当format为iife和umd时必须提供，将作为全局变量挂在window下
        sourcemap:true,
        globals:{
            lodash:'_', //告诉rollup全局变量_即是lodash
            jquery:'$' //告诉rollup全局变量$即是jquery
        }
    },
    plugins:[
        babel({
            exclude:"node_modules/**"
        }),
        resolve(),
        commonjs(),
        typescript(),
        postcss(),
+       serve({
+           open:true,
+           port:8080,
+           contentBase:'./dist'
+       })
    ],
    external:['lodash','jquery']
}

11.3 package.json #

package.json

{
  "scripts": {
    "build": "rollup --config rollup.config.build.js",
    "dev": "rollup --config rollup.config.dev.js -w"
  },
}

导航菜单

rollup实战 #

1 背景 #

2. 安装依赖 #

3 初次使用 #

3.1 rollup.config.js #

3.2 src\main.js #

3.3 package.json #

3.4 dist\index.html #

4 支持babel #

4.1 安装依赖 #

4.2 src\main.js #

4.3 .babelrc #

4.4 rollup.config.js #

5 tree-shaking #

5.1 src\main.js #

5.2 src\msg.js #

6 使用第三方模块 #

6.1 安装依赖 #

6.2 src\main.js #

6.3 rollup.config.js #

7 使用CDN #

7.1 src\main.js #

7.2 dist\index.html #

7.3 rollup.config.js #

8 使用typescript #

8.1 安装 #

8.2 src\main.ts #

8.3 rollup.config.js #

8.4 tsconfig.json #

9 压缩JS #

9.1 安装 #

9.2 rollup.config.js #

10 编译css #

10.1 安装 #

10.2 rollup.config.js #

10.3 src\main.js #

10.4 src\main.css #

11 本地服务器 #

11.1 安装 #

11.2 rollup.config.dev.js #

11.3 package.json #

访问验证