JS项目打包之ROLLUP.JS入门

最新推荐文章于 2025-05-08 10:18:13 发布

火柴盒zhang

最新推荐文章于 2025-05-08 10:18:13 发布

阅读量708

点赞数

CC 4.0 BY-SA版权

分类专栏：设计模式文章标签： webpack 前端 javascript

本文链接：https://blog.youkuaiyun.com/likewindy/article/details/127963503

设计模式专栏收录该内容

10 篇文章

订阅专栏

本文介绍如何使用Rollup进行JavaScript项目的模块打包。从环境配置到项目建立，再到具体配置及命令执行，最后演示如何运行打包后的文件。适用于希望了解Rollup基本用法的开发者。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、目的

Rollup是一个用于JavaScript的模块打包器，它将小块代码编译成更大、更复杂的东西，例如库或应用程序。它为JavaScript ES6版本中包含的代码模块使用了新的标准化格式，而不是以前的特殊解决方案，如CommonJS和AMD。ES模块可以让您自由无缝地组合您喜爱的库中最有用的单个函数。这最终在任何地方都是可能的，但Rollup让你今天就可以做到。

二、环境配置

2.1 nodejs下载

npm install -g cnpm --registry=http://registry.npm.taobao.org
cnpm install --global rollup

2.2 GitHub

GitHub - rollup/rollup: Next-generation ES module bundler

三、项目建立与打包例子

3.1 项目建立

 cnpm init -y
 cnpm install rollup --save-dev

执行后项目结构如图：

3.2 rollup配置

rollup.config.js

export default {
  input:'./src/main.js',//入口文件
  output:{
    file:'./dist/bundle.js',//打包后的存放文件
    format:'cjs'//输出格式 
    
  },
  plugins:[

  ]
}

3.3 打包命令

替换package.json文件中的打包命令

{
  "name": "rolluppack",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "rollup --config" /* 此处替换*/
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "rollup": "^3.4.0"
  }
}

3.4 编写你的程序

import MotiWidgetFactory from './MotiWidgetFactory.js';

export default class main{
    main(){
	    let pmFactory =new MotiWidgetFactory();//WidgetFactory
		pmFactory.CreateScrollBar();
    } 
 }


  export default  class MotiWidgetFactory {
      constructor() {
          
      }
      CreateScrollBar() { 
        console.log(` CreateScrollBar  `);
      }
      CreateWindow() {  
        console.log(` CreateWindow  `);
      }
    }

3.5 执行打包

cnpm run build

3.6 使用编译好的文件

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
 
</head>
<body>
 

    <script type="text/javascript" src="./dist/bundle.js"></script>

    <script  type="module" >
       
 
 let cl=new main();
 cl.main()

 

    </script>
</body>
</html>