标签: rollup

假设我有一个表格,census其中包含以下信息:

COUNTRY     PROVINCE    CITY        POPULATION
==============================================
USA         California  Sacramento  1234
USA         California  SanFran     4321
USA         Texas       Houston     1111
USA         Texas       Dallas      2222
Canada      Ontario     Ottawa      3333
Canada      Manitoba    Winnipeg    4444

我正在国家/省级建立一份报告,它给了我以下内容:

SELECT country, province, SUM(population)
FROM census
GROUP BY country, province;

COUNTRY     PROVINCE    SUM(POPULATION)
=======================================
USA         California  5555
USA         Texas       3333
Canada      Ontario     3333
Canada      Manitoba    4444

我希望报告中包含"总体摘要"行,以便最终结果如下所示:

COUNTRY     PROVINCE    SUM(POPULATION)
=======================================
USA         California   5555
USA         Texas        3333
Canada      Ontario      3333
Canada      Manitoba     4444
TOTAL                   16665

我很熟悉ROLLUP …

我正在创建一个可共享的 React 组件库。

该库包含许多组件，但最终用户可能只需要使用其中的几个。

当您将代码与 Webpack（或 Parcel 或 Rollup）捆绑在一起时，它会创建一个包含所有代码的文件。

出于性能原因，除非实际使用，否则我不希望浏览器下载所有代码。我认为我不应该捆绑组件是否正确？捆绑是否应该留给组件的消费者？我是否将其他任何东西留给组件的消费者？我只是转译 JSX 就这样吗？

如果同一个 repo 包含许多不同的组件，那么 main.js 中应该包含什么？

我设法使用npm 中的这个插件在我的 Typescript React 类中导入 css 模块。

tsconfig.json

{
  "compilerOptions": {
    "target": "ESNext",
    "outDir": "build",
    "jsx": "react",
    "noImplicitAny": false,
    "removeComments": true,
    "sourceMap": false,
    "module": "ESNext",
    "allowJs": true,
    "moduleResolution": "node",
    "esModuleInterop": true,
    "baseUrl": "src",
    "plugins": [{ "name": "typescript-plugin-css-modules" }]
  },
  "exclude": [
    "node_modules/"
  ],
  "include": [
    "src/*"
  ]
}

我还在 src/ 文件夹中添加了以下模块文件：

模块.d.ts

{
  "compilerOptions": {
    "target": "ESNext",
    "outDir": "build",
    "jsx": "react",
    "noImplicitAny": false,
    "removeComments": true,
    "sourceMap": false,
    "module": "ESNext",
    "allowJs": true,
    "moduleResolution": "node",
    "esModuleInterop": true,
    "baseUrl": "src",
    "plugins": …

我制作了一个导出单个组件的小型 npm 包。该组件使用 SCSS 模块设计样式，并使用 Rollup 捆绑在一起。一切似乎都工作正常，但是当我将它导入到 NextJS 项目中时，我注意到这些样式没有应用于从 NextJS 发送的 SSR 文档（它们最终确实得到了应用，但是有一个问题，组件未设置样式）。

这是我第一次创建 npm 包，也是第一次使用 Rollup，我很难弄清楚如何解决这个问题。也许我不需要将 CSS 捆绑到 .js 文件中并指示用户自己导入 css 文件？不过，我试图避免采取额外的步骤。也许使用 CSS-in-JS 可以解决这个问题，但如果可以避免的话，我宁愿不添加依赖项。

任何指示将不胜感激！

我的汇总配置如下所示：

const config = [
  {
    input: "src/lib/index.ts",
    output: [
      {
        file: pkg.main,
        format: "cjs",
        sourcemap: true,
      },
      {
        file: pkg.module,
        format: "esm",
        sourcemap: true,
      },
    ],
    plugins: [
      peerDepsExternal(),
      resolve(),
      commonjs(),
      url(),
      svgr(),
      typescript({ tsconfig: "./tsconfig.json", rootDir: "src/lib" }),
      postcss({
        modules: true,
      }),
      terser(),
      bundleSize(),
      visualizer(),
    ],
  },
  {
    input: "dist/esm/types/index.d.ts",
    output: [{ …

当我尝试在 vue3 中构建库时，我想设置多个输出文件。代码如下：

rollupOptions {
  output: [
    {
      file: 'bundle.js',
      format: 'cjs'
    },
    {
      file: 'bundle.min.js',
      format: 'iife',
      name: 'version',
    }
  ]
}

然后我会得到一个错误：

您必须为单文件构建设置“output.file”，或者在生成多个块时设置“output.dir””

那么，我该怎么做才能使这项工作成功呢？

投票：2.3.7

我有一个副业项目，Vue.js 3并vite作为我的捆绑商。

每次构建之后，捆绑的文件都会从之前的构建中获得相同的哈希值，例如：

index.432c7f2f.js   <-- the hash will be identical after each new build
index.877e2b8d.css
vendor.67f46a28.js

因此，在每次新构建之后（文件上具有相同的哈希值），我必须重新加载浏览器以清除缓存并查看我所做的更改。

我尝试在 中使用不同的版本号强制清除package.json，但是：

1. 在Vite/Rollup环境下不起作用，
2. 每次更改后都手动输入新号码是没有意义的。

问题：

有没有办法配置 vite 在新构建后随机创建新哈希，或者您知道清除缓存的另一个技巧吗？

有人使用 Vite 捆绑他们的 MUI 应用程序吗？我对来自 Vite/Rollup 的供应商块（1.1MB）有多大感到惊讶。我提出了以下配置，它将 MUI 包分成它自己的块：

import { defineConfig } from "vite";
import reactRefresh from "@vitejs/plugin-react-refresh";
import { dependencies } from "./package.json";

// whenever you get the error: (!) Some chunks are larger than 500kb after minification
// find the biggest lib in your vendors chunk and add it to bigLibs
const bigLibs = [
  { regExp: /^@material-ui*/, chunkName: "@material-ui" },
  { regExp: /^@aws-amplify*/, chunkName: "@aws-amplify" },
];

function getManualChunks(deps: Record<string, string>) {
  return Object.keys(deps).reduce(
    (prev, cur) …

我正在使用 Rollup 来捆绑我的生产代码。
我有多个 js 文件，因此我使用 Rollupplugin-multi-entry插件来使用 glob 模式来定位我的所有 js 文件。
我正在以格式输出文件umd。

目前它们作为一个 js 文件输出，捆绑在一起，这是预期的行为，但我也想将它们全部单独输出，转换为 es5 和 umd 格式，但不连接到一个 js 捆绑文件中，如何我可以这样做吗？

当前设置：

import babel from "rollup-plugin-babel";
import { terser } from "rollup-plugin-terser";
import multi from "@rollup/plugin-multi-entry";
import gzipPlugin from "rollup-plugin-gzip";

export default [{
    input: "src/**/*.logic.js",
    output: {
        dir: "build/assets/js",
        format: "umd",
        name: "Logic"
    },
    plugins: [
        gzipPlugin(),
        multi({
            exports: true
        }),
        babel({
            exclude: "node_modules/**"
        })
    ]
}]

如果我将 svg 文件导入到 ES6 模块中，如何在汇总中处理它？我目前有这样的事情（我正在做的简单例子）：

import next from '../assets/next.svg';
export default () => console.log('Here is some Svg: ! ', next);

我有一个如下所示的汇总配置：

import babel from 'rollup-plugin-babel';
import resolve from 'rollup-plugin-node-resolve';
import commonjs from 'rollup-plugin-commonjs';

export default {
  entry: 'src/app.js',
  dest: 'build/app.min.js',
  format: 'iife',
  sourceMap: 'inline',
  plugins: [
    babel({
      exclude: 'node_modules/**',
    }),
    resolve({
      jsnext: true,
      main: true,
      browser: true,
    }),
    commonjs(),
  ],
};

然后我收到以下错误：

无法解析 /home/magnferm/projects/slask/rollup-test/src/chill/index.js 中的“../assets/next.svg”

路径没有问题，但 rollup 似乎不知道如何处理 svg 文件。有没有我可以使用的插件，或者我是否必须以某种方式区别对待它？

当我使用 Storybook 查看 React 组件库时，一切都运行良好。当我将库发布到 NPM 注册表时，我将其安装到虚拟 React 应用程序中，除了字体之外，一切都按预期工作。下面是我的 rollup.config.js 插件：

plugins: [
    external(),
    babel({
      exclude: 'node_modules/**',
      babelHelpers: 'bundled',
    }),
    del({ targets: ['dist/*'] }),
    postcss(),
    url({
      include: ['**/*.woff'],
      limit: Infinity,
    }),
    copy({
      targets: [{ src: ['./src/fonts'], dest: 'dist' }],
    }),
],

这是我的 font.scss

@font-face {
  font-family: 'CustomFontExample';
  src: local('CustomFontExample'),
    url('/fonts/CustomFontExample.woff')
      format('woff')
}

我相信问题要么存在于我的 Rollup.config.js 中，要么我没有正确设置我的 @font-face 路径。我目前将其设置为相对路径，当我在 Storybook 中查看组件时，该路径工作得很好。

有人知道我该如何解决这个问题吗？