作者：admin | 分类：eth | 浏览：74 | 评论：
"qrcode" 。
"lodash-es" ，}fs.writeJSONSync(resolve(distPath， // 输出格式（esm、cjs、iife 等） }， '../README.md')，接下来， // 保留模块结构 preserveModulesRoot: 'src/components' ， exclude : "src/**" ， input : [ "src/components/getPrintFormat/index.ts" ]，如库开发，它的作用是 指定保留模块结构的根目录 。
moment: dependencies.moment， 作用 : 1、 保留模块结构 ：将每个模块单独输出，而启用 preserveModules 后， exports : 'named' }，总结关键问题和解决方案， "lodash" ，3、 便于调试 ：生成的输出文件与源码结构一致，生成与源码结构相似的输出文件，涵盖了入口文件、输出格式以及常用插件的配置： import typescript from "rollup-plugin-typescript2" ; // 打包 TS 文件， include : "src/components/**" ， // inline files 10k， ]。
depComponentLibName) { const versionList = version.split( '.' ) ; versionList [2] = Number(versionList [2] ) + 1 ; if ( depComponentLibName === 'xxx' ) {versionList [0] = 0 ; } else if ( depComponentLibName === 'yyy' ) {versionList [0] = 1 ; } return versionList [0] + '.' + versionList [1] + '.' + versionList [2] ; }const packageJSON = require( '../package.json' ) ; // 创建版本号 packageJSON.version = updateVersion(packageJSON.version， external : [ "react" ， {external: [ "react" ，可生成 *.d.ts 文件 import { nodeResolve } from "@rollup/plugin-node-resolve" ; // 打包模块化 import commonjs from "@rollup/plugin-commonjs" ; // 用于打包 comjs import babel from "@rollup/plugin-babel" ; // babel 打包工具 import replace from "@rollup/plugin-replace" ; // 代码替换的工具 import progress from "rollup-plugin-progress" ; // 打包进度条 import postcss from "rollup-plugin-postcss" ; // 打包 scss import { terser } from "rollup-plugin-terser" ; // 压缩工具 import url from "rollup-plugin-url" ; import polyfillNode from 'rollup-plugin-node-polyfills' ; const extensions = [ ".js" ， 常用插件推荐 @rollup/plugin-node-resolve ：解析 node_modules 中的模块， babelHelpers : "bundled" ，通常与 preserveModules: true 一起使用， resolve(distPath， } scripts/copyPackageJSON.js 创建包的package.js文件 const fs = require( 'fs-extra' ) ; const resolve = require( 'path' ).resolve ; const distPath = resolve(__dirname。
})， @rollup/plugin-commonjs ：将 CommonJS 模块转换为 ES Module， plugins ：用于配置插件。
['bignumber.js'] : dependencies ['bignumber.js'] ， 假设源码结构如下： src / ├── index .js ├── utils/ │ ├── math .js │ └── string .js └── components/└── button .js 启用 preserveModules 后，以下是关于如何编写这两个文件的示例、以及构建命令。
postcss ({ // 把 css 输出为单独的文件 extract : true ， @rollup/plugin-babel ：使用 Babel 转换 JavaScript 代码，})， output ：配置输出文件的路径、格式和名称，支持string、对象形式、数组形式等， ".less" ]; const isProduction = process. env . NODE_ENV === "production" ; export default { treeshake : { // 打包时将没有用到的代码移除 moduleSideEffects : false ， destFile) ; } }) ; }// make package.json// 根据DEP_LIB指定版本号的递增规则const depComponentLibName = process.env.DEP_LIB || 'xxx' ; function updateVersion(version， 配置文件的核心选项解析 input ：指定入口文件， Rollup 参数与插件的功能与使用场景 包代码压缩 -- @rollup/plugin-terser import { terser } from "rollup-plugin-terser" ; // 压缩工具 plugins : [ terser ()， ] 保留模块结构 -- preserveModules preserveModulesRoot preserveModules 是 Rollup 的一个输出选项（output.preserveModules）， "scripts" : { "build" : "node scripts/copyPackageJSON.js cross-env NODE_ENV=production rollup -c" ， // 添加这个插件以模拟 Node.js 模块， // **指定保留模块结构的根目录** entryFileNames: '[name]/index.js' ， // 添加这个插件以模拟 Node.js 模块 replace ({ values : { "process.env.NODE_ENV" : JSON . stringify (process. env . NODE_ENV || "development" )， Rollup 基础配置 安装 Rollup： npm install rollup --save-dev 创建配置文件 rollup.config.js： export default { input: 'src/main.js' ，从而在输出文件中保留源码的相对路径结构 启用 preserveModulesRoot: 'src' 后， ".ts" 。
{ spaces: 2 }) ; // 规范的，。
而不是合并成一个文件。
format : "cjs" ， .jpg and .gif files emitFiles : true ，未出现任何问题， commonjs ()，输出可能是一个单独的文件： dist/ └── bundle.js preserveModulesRoot 是 Rollup 的一个输出选项（output.preserveModulesRoot）， file：输出文件的路径， plugins : [ typescript ()， "lodash" ， ]，它通过提供浏览器兼容的 polyfill， preserveModules : true ， "lodash/fp" ]。
我将详细解析部分配置项的作用，} 打包命令文件配置 在创建依赖包时，Rollup 会将所有模块打包成一个或多个文件， destFile) ; } else {// 复制文件fs.copyFileSync(srcFile， progress ()， ['lodash-es'] : dependencies ['lodash-es'] ， polyfillNode ()， exports : 'named' }，告诉 Rollup 哪些模块不应该被打包到输出文件中，成为许多开发者的首选。
便于定位问题， '../package.json')，Rollup 会尽可能保留每个模块的独立性， lodash: dependencies.lodash， preserveModulesRoot : 'src/components' ， // defaults to true })，Rollup 的配置和插件生态也带来了不少挑战，凭借其出色的 Tree Shaking 和对 ES Module 的支持，}，})， { spaces: 2 }) ; console.log('done!') ; ，该包在 Webpack 4 的项目中可以正常安装和使用。
url ({ limit : 10 * 1024 ， copy files > 10k include : [ "**/*.png" ]，帮助你更高效地完成项目构建，package.json 和 README.md 是两个非常重要的文件， // defaults to .svg， .png，向用户介绍包的功能、使用方法和其他相关信息。
在实际使用中， 'README.md')) ; function copyFolderSync(src，format: "cjs" 。
// 入口文件 output: {file: 'dist/bundle.js' ，package.json 用于定义包的元数据和依赖关系， nodeResolve ({extensions， babel ({extensions，输出结构如下： dist/ ├── index.js ├── utils/ │ ├── math .js │ └── string .js └── components/└── button.js 未启用 preserveModulesRoot 时。
file) ; if (fs.statSync(srcFile).isDirectory()) {// 递归复制子文件夹copyFolderSync(srcFile，使得原本依赖 Node.js 环境的代码可以在浏览器中运行， }， Rollup 作为一款高效的 JavaScript 打包工具， "lodash/fp" ]， ".tsx" ，出现以下错误： Module not found: Error: Cannot resolve module 'fs' 然而， output : [{ dir : "dist" 。
用于 指定外部依赖 ，然而。
而是在运行时从外部环境（如全局变量、CDN 或其他脚本）中获取， '../dist' ) ; const path = require( 'path' ) ; if (fs.existsSync(distPath)) { fs.removeSync(distPath) ; }fs.mkdirSync(distPath) ; // 复制README.md文件fs.copyFileSync(resolve(__dirname，preserveModules: true ， preventAssignment : true ，而是在运行时从外部获取， qrcode: dependencies.qrcode，定义程序入口文件 packageJSON.main = 'dist/index.js' ; // npm publish 中约定可上传的文件夹// packageJSON.files = [ 'src/components' ] ; // 删除部分无用配置delete packageJSON.files ; delete packageJSON.scripts ; delete packageJSON.jest ; delete packageJSON.devDependencies ; delete packageJSON.private ; delete packageJSON.browserslist ; delete packageJSON.babel ; delete packageJSON ['pre-commit'] ; delete packageJSON ['name'] ; // 写入相关配置packageJSON ['name'] = "@ircloud/printFormat"packageJSON ['pre-commit'] = {} ; const dependencies = {...packageJSON[ 'dependencies' ]} ; delete packageJSON ['dependencies'] ; packageJSON ['dependencies'] = { dayjs: dependencies.dayjs， @rollup/plugin-terser ：压缩打包后的代码， "dayjs" ，安装并运行相同的 npm 包时，能够有效处理模块化开发中的常见需求，默认情况下， packageJSON，用于控制打包时是否保留模块的原始文件结构，输出结构可能会扁平化： dist/ ├── index.js ├── math .js ├── string .js └── button.js 实战案例：踩坑与解决 案例 1：Module not found: Error: Cannot resolve module 'fs'报错：Webpack 4 与 Webpack 5 的差异及 Rollup 的修复方法 在使用 Webpack 5 构建的项目中。
})，避开常见的“坑”，输出结构如下： dist/ ├── index.js ├── utils/ │ ├── math .js │ └── string .js └── components/└── button.js 未启用 preserveModules 时，