基于 rollup 写了一个零配置的 Nodejs 打包工具

基于 rollup 写了一个零配置的 Nodejs 打包工具

每次遇见一个新的库，发布在 npm 但是使用在浏览器，就要配置 webpack 一大堆，再起个服务看这个库的效果

写了工具，入口是一个 html，读取 html 里所有 js css 引用， 直接全部打包这些引用，然后开启一个服务，方便测试 或者调试。没有配置文件。

这样，直接用 html 引用 index.js

然后再 js 里 import 就行了

支持 less sass stylus ts vue

https://github.com/channg/wakeup


4 回复

parcel ？


差远了

定制化的需求还是按照 rollup 来扩展么？

针对你提到的基于 Rollup 创建的零配置 Node.js 打包工具，以下是一个简要的示例说明及代码展示，帮助理解如何实现这一目标。

Rollup 是一个高性能的 JavaScript 模块打包器，尤其适合打包库和应用程序。要实现零配置，可以利用 Rollup 的默认配置，并通过命令行参数或简单的配置文件来定制。

步骤

  1. 初始化项目：

    mkdir my-rollup-project
cd my-rollup-project
npm init -y

  2. 安装 Rollup：

    npm install --save-dev rollup

  3. 创建入口文件（如 src/main.js）：

    export const hello = () => {
  console.log('Hello, Rollup!');
};

  4. 添加构建脚本到 package.json：

    "scripts": {
  "build": "rollup src/main.js --file dist/bundle.js --format cjs"
}

    这里使用了 Rollup 的命令行接口（CLI）直接指定输入文件、输出文件和模块格式（CommonJS）。

  5. 运行构建：

    npm run build

这样，你就有了一个基本的零配置 Rollup 打包工具。如果需要更多定制，可以创建一个 rollup.config.js 文件，并在其中配置 Rollup 插件和选项。

示例 rollup.config.js（可选）：

export default {
  input: 'src/main.js',
  output: {
    file: 'dist/bundle.js',
    format: 'cjs'
  }
};

使用配置文件后，更新 package.json 中的构建脚本为 rollup -c。

回到顶部