使用rollup打包应用

最新推荐文章于 2024-10-18 12:42:53 发布

慕水渔

最新推荐文章于 2024-10-18 12:42:53 发布

阅读量1.6k

点赞数 1

分类专栏： javascript

本文链接：https://blog.csdn.net/qq_41293573/article/details/118421669

版权

javascript 专栏收录该内容

32 篇文章 0 订阅

订阅专栏

Rollup 是一个 JavaScript 模块打包器，可以将小块代码编译成大块复杂的代码。他与webpack的最大区别如下：

 特性:
       rollup 所有资源放同一个地方，一次性加载,利用 tree-shake特性来  剔除未使用的代码，减少冗余
       webpack 拆分代码、按需加载  webpack2已经逐渐支持tree-shake
   rollup:
     1.打包你的 js 文件的时候如果发现你的无用变量，会将其删掉。
     2.可以将你的 js 中的代码，编译成你想要的格式
   webpack:
    1.代码拆分
    2.静态资源导入（如 js、css、图片、字体等）
    拥有如此强大的功能，所以 webpack 在进行资源打包的时候，就会产生很多冗余的代码。

好了，接下来就使用rollup来打包一个员工模型。
首先通过npm init初始化项目；
创建入口文件main.ts

export default class Staff {
    private name: String;
    private age: Number;
    private sex: String;
    private skill: String;
    constructor(){
        this.name = '';
        this.age = 0;
        this.sex = '';
        this.skill = '';
    }
    //实用技能技能
    useSkill(){
        console.log('我的技能是：',this.skill);
    }
    //设置技能
    setSkill(skill){
        this.skill = skill;
    }
    //设置员工属性
    setStaff(config:Object){
        for(let key in config){
            this[key] = config[key];
        }
    }
}

接下来就是最重要的rollup配置项，在这里你可以任意的配置出你想要的输出文件，我的rollup.config.js如下：

import commonjs from 'rollup-plugin-commonjs';
import resolve from 'rollup-plugin-node-resolve';
import {terser} from 'rollup-plugin-terser'
import babel from "rollup-plugin-babel";
import typescript from "rollup-plugin-typescript";
import sourceMaps from "rollup-plugin-sourcemaps";
import json from 'rollup-plugin-json'
export default {
    input:'src/main.ts', //入口
    output: {
        name: 'Staff', //实例化的类名称
        file: 'dist/Staff.js',//输出路径
        format: 'iife',//一个自动执行的功能，适合作为<script>标签
    },
    plugins: [
        commonjs(), // 兼容cjs
        terser(), // 压缩
        babel({
            exclude: 'node_modules/!**',
        }),// 配置babel，将es6转为es5
        typescript({
            exclude: "node_modules/**",
            typescript: require("typescript")
        }),
        sourceMaps(), // 支持ts
        json(), // 支持json导出
    ]
}

最后下载你所需要的依赖包，我的package.json如下：

{
  "name": "rollup",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "rollup -c rollup.config.js"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.10.2",
    "rollup": "^2.52.7",
    "rollup-plugin-babel": "^4.4.0",
    "rollup-plugin-commonjs": "^10.1.0",
    "rollup-plugin-json": "^4.0.0",
    "rollup-plugin-node-resolve": "^5.2.0",
    "rollup-plugin-sourcemaps": "^0.6.2",
    "rollup-plugin-terser": "^7.0.2",
    "rollup-plugin-typescript": "^1.0.1",
    "tslib": "^2.0.1",
    "typescript": "^4.3.5"
  }
}

最后执行build命令即可得到你想要的js文件。