基于Rollup打包开箱就用模板

Rollup是一个打包个人js库的的一个工具，VUE也是基于它打包的，但是个人上手直接使用你会碰到各种问题。

开始：项目初始化

npm init (创建一个项目，直接都回车就好了)

类似文件 package.json

{
  "name": "smartcat",
  "version": "1.0.0",
  "description": "",
  "main": "rollup.config.js",
  "directories": {
    "lib": "lib"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.18.2",
    "@babel/plugin-transform-runtime": "^7.18.2",
    "@babel/preset-env": "^7.18.2",
    "@rollup/plugin-auto-install": "^2.2.0",
    "@rollup/plugin-babel": "^5.3.1",
    "@rollup/plugin-buble": "^0.21.3",
    "@rollup/plugin-commonjs": "^22.0.0",
    "@rollup/plugin-json": "^4.1.0",
    "@rollup/plugin-node-resolve": "^13.3.0",
    "rollup-plugin-terser": "^7.0.2"
  },
  "dependencies": {
    "js-base64": "^3.7.2",
    "js-md5": "^0.7.3"
  }
}

第一步：安装rollup.js和相关插件

npm install -D rollup.js
npm install -D '@rollup/plugin-auto-install' '@rollup/plugin-node-resolve' '@rollup/plugin-commonjs' '@rollup/plugin-json' '@rollup/plugin-buble'
npm install -D '@babel/core' 
npm install -D rollup-plugin-terser 
npm install -D '@babel/plugin-transform-runtime'

以上插件都是必须的，否则你会搞死人的，我也不知道开发者为何就不能给一个简单的模板？搞定的如此的负责配置。

那么多的插件需要安装，真是晕过去了；

第二步建立：rollup.config.js 配置文件

以下是可以开箱就好用的基本配置，满足：IE浏览器兼容，如果需要请直接拷贝以下内容就可以。

以下内容我通过多天调试成功（兼容：IE7，8，10，11），被IE 搞死了；

// rollup.config.js
// npm install -D '@rollup/plugin-auto-install' '@rollup/plugin-node-resolve' '@rollup/plugin-commonjs' '@rollup/plugin-json' '@rollup/plugin-buble'
// npm install -D '@babel/core' 
// npm install -D rollup-plugin-terser 
// npm install -D '@babel/plugin-transform-runtime'
import auto from '@rollup/plugin-auto-install';
import buble from '@rollup/plugin-buble';
import babel from "@rollup/plugin-babel";
import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import json from '@rollup/plugin-json';
import pkg from './package.json';//配置
import { terser } from 'rollup-plugin-terser';//压缩代码
const banner =
    `/*!
 * smartcat.js v${pkg.version}
 * (c) 2022-${new Date().getFullYear()} 
 * https://github.com/smartcat
 * weixin:smartcat01
 * Released under the MIT License.
 */`
export default {
    input: './src/main.js',//需要打包的js
    output: {
        file: 'smartcat.js',//打包输出
		name: 'smartcat',//只接在js中可以使用的全局变量
		banner:banner,  //打包后文件头信息
		sourcemap: true, //代码调试: 开发环境填true 发布环境可以用 false
        format: 'umd'//amd:异步模块 用于Require.js cjs:用于Commn.js Node和webpack  es：将软件保存为ES模块 iife：适合<script>标签 umd:通用模块 amd，cjs 和iife 为一体
    },
    watch: {
        exclude: 'node_modules/**'
    },
    plugins: [
		auto(),
		json(),
		resolve(),
		commonjs(),
		buble(),
		babel({
			  babelHelpers: 'runtime',//有扩展外部模块时需要使用 默认捆绑模式搞死认的地方
			  exclude: 'node_modules/**',
		}),
		terser()
	],
} 

其中：format 为 umd 这样可以在了<scripty></scripty>中使用

第三步：建立： .babelrc 文件

直接拷贝下文就可以，请不要修改； "@babel/preset-env", 改成："@babel/env",也是可以的

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "modules": false,
      }
    ]
  ],
  "plugins": [
    "@babel/plugin-transform-runtime"
  ]
}

第4步：建立文件夹src 我们就可以直接在下面写代码了

第5步：打包:  rollup -c

第6步：测试： 

项目以一个js加密解密为例：

整个模板文件： 

百度网盘： 提取码： c954百度网盘 请输入提取码https://pan.baidu.com/s/17HRDk7q6UzEk92-suvTgtg?pwd=c954