npm 包 @1stg/rollup-config 使用教程-JavaScript中文网-JavaScript教程资源分享门户

介绍

在前端开发中，打包工具是必不可少的。Rollup 是一款基于 ES6 模块语法的打包工具，相比于其他打包工具，例如 webpack，它具有更高的打包速度和更小的代码体积。

@1stg/rollup-config 是一个 Rollup 配置的 npm 包，它封装了常用的 Rollup 配置，使得使用者可以简单、快速地搭建一个基于 Rollup 的打包环境。

安装

使用 npm 安装：

npm install @1stg/rollup-config --save-dev

使用

基本使用

在项目根目录下创建一个 rollup.config.js 文件，并写入以下内容：

import createConfig from '@1stg/rollup-config';
export default createConfig();

然后在 package.json 文件中添加一个打包命令：

{
  "scripts": {
    "build": "rollup -c"
  }
}

现在你可以运行 npm run build 来打包你的项目了。

配置项

@1stg/rollup-config 封装了一些通用的 Rollup 配置，例如支持 ES6+ 语法、支持 TypeScript、支持 CSS 和 SCSS 等。

可以通过传入配置项来自定义 Rollup 配置。

例如，你想要使用 TypeScript 而不是默认的 Babel，可以这样：

import createConfig from '@1stg/rollup-config';
export default createConfig({
  useBabel: false,
  useTypescript: true
});

可以在 @1stg/rollup-config 的 GitHub 仓库中的 readme 中查看所有可用的配置项。

示例代码

下面是一个使用 @1stg/rollup-config 的例子，它使用了 TypeScript 和 SCSS：

-- -------------------- ---- -------
-- ----------------
------ ------- ---- ------------------------------
------ -------- ---- --------------------------
------ ------- ---- ------------------------
------ ------------ ---- ---------------

------ ------------ ---- ----------------------

------ ------- --------------
  --------- ------
  -------------- -----
  -------- -
    ----------
    -----------
    ---------
      -------- -
        --------------
      -
    --
  -
---

// package.json
{
  "scripts": {
    "build": "rollup -c"
  }
}

总结

使用 @1stg/rollup-config 使得搭建一个基于 Rollup 的打包环境变得更加简单、快速。同时，通过传入配置项，使用者可以自定义 Rollup 配置，满足更多的需求。

如果你想深入了解 Rollup 的打包方式，或者想了解如何封装一个 npm 包，@1stg/rollup-config 有一定的指导意义。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/5f698856a9b7065299ccb80e