本文主要是介绍监控平台之rollup打包，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
设计思路
1.根据模块，通过index.js去调用执行调用
2.WebEyeSDK.js暴露方法，同时定义init方法，去初始化config里的上报参数
3.rollup/build里入口文件为WebEyeSDK.js进行打包
4.打包编译用babel，同时安装babel/preset-env智能预设（可去webpack专栏查看）
5.bundle格式，原文件采用iife格式，原因是
- 创建只使用一次的函数，并立即执行它。
- 创建闭包，保存状态，隔离作用域。
- 作为独立模块存在(例子如jQuery)，防止命名冲突，命名空间注入(模块解耦)。
6.其他格式，esm，cjs打包，静态异步和同步方式进行打包
项目整体架构流程图
rollup打包文件
plugin：
rollup/plugin-json 上报数据采用json格式保存，Rollup 会将 data.json 的内容嵌入到生成的 bundle.js 文件中，这样你就可以在最终的代码中使用 JSON 数据。
@rollup-plugin-babel：同babel/preset-env，进行智能预设，会根据版本，浏览器进行语法编译
const path = require('path')
const json = require('@rollup/plugin-json')
const {babel} = require('@rollup/plugin-babel')const resolveFile = function(filePath) {return path.join(__dirname, filePath)
}const plugins= [json({compact: true}),babel({extensions: ['.js','.ts'],babelHelpers: 'bundled',presets: [['@babel/env',{targets: {browsers: ['> 1%','last 2 versions','not ie <= 8',]}}]]})
]module.exports = [{plugins,input: resolveFile('../src/webEyeSDK.js'),output: {file: resolveFile('../dist/webEyeSDK.js'),format: 'iife',name: 'WebEyeSDK',soucemap: true,// globals: {// 'vue': 'Vue',// }}},{plugins,input: resolveFile('../src/webEyeSDK.js'),output: {file: resolveFile('../dist/webEyeSDK.js'),format: 'iife',name: 'WebEyeSDK',soucemap: true,// globals: {// 'vue': 'Vue',// }}},{plugins,input: resolveFile('../src/webEyeSDK.js'),output: {file: resolveFile('../dist/webEyeSDK.esm.js'),format: 'esm',name: 'WebEyeSDK',soucemap: true,// globals: {// 'vue': 'Vue',// }}},{plugins,input: resolveFile('../src/webEyeSDK.js'),output: {file: resolveFile('../dist/webEyeSDK.cjs.js'),format: 'cjs',name: 'WebEyeSDK',soucemap: true,//// globals: {// 'vue': 'Vue',// }}}
]这篇关于监控平台之rollup打包的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
