标签: rollupjs

我最近一直在研究汇总,看看它与Webpack和其他捆绑商的区别.我遇到的一件事是,由于"扁平捆绑",它对图书馆更好.这是基于一条推文和最近的React PR来使用Rollup.

根据我的经验,由于围绕扁平捆绑(例如吊装)的更好优化,Rollup更擅长构建库.1/2

如果您使用代码分割等捆绑应用程序,Webpack 2可能更适合您.2/2

我不完全确定我明白这意味着什么.扁平捆绑是指什么？我知道Rollup的文档提到了树形图,以帮助减少包大小,但Webpack也有办法做到这一点.也许我完全不理解这个概念.

请注意,这不是关于Rollup vs Webpack的比较问题.对于那些对此感兴趣的人,Webpack有一个比较图表.这主要是问平板捆绑是什么？Rollup可能会在内部做些什么来实现这一目标？

我正在尝试将一些字符串注入到 Vite 应用程序的 index.html 中（使用 vue3 模板）。例如，在 vue-cli 项目中，我们会有

<link rel="icon" href="<%= BASE_URL %>favicon.ico">

Vite 的方式是什么？（我知道在这种情况下 BASE_URL 只是“/”。我要求通用的解决方案）我可以使用仅涵盖环境变量的解决方案，但如果知道一个可以使用的更通用的解决方案，那就太好了JS 代码如

<title><%= htmlWebpackPlugin.options.title %></title>

我真的很感激一个不需要安装 npm 包的解决方案

我正在尝试遵循Angular 2 的官方AoT指南,我在我的应用程序中使用Moment.js.Moment.js在我的packages.json文件中,我使用的是2.15.0 版本.到目前为止我一直在导入它:

import * as moment from 'moment';

但是当我到达必须运行汇总的部分时,我最终得到以下错误:

无法调用命名空间('时刻')

这似乎是与我根据导入的时刻方式本.那么,我该怎么做呢？我似乎无法以任何其他方式导入时刻.如果我使用

import moment from 'moment'

我收到编译错误

外部模块"'时刻''没有默认导出

我正在构建一个 React 组件包，并希望将我的测试文件夹排除在从汇总构建的 dist 文件中捆绑之外。

运行后我的文件结构如下所示rollup -c

.\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 dist\n\xe2\x94\x82   \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 index.js\n\xe2\x94\x82   \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 tests\n\xe2\x94\x82      \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 index.test.js\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 src\n\xe2\x94\x82   \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 index.tsx\n\xe2\x94\x82   \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 tests\n\xe2\x94\x82      \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 index.test.tsx\n

我的汇总配置如下所示：

import typescript from 'rollup-plugin-typescript2'\n\nimport pkg from './package.json'\n\nexport default {\n  input: 'src/index.tsx',\n  output: [\n    {\n      file: pkg.main,\n      format: 'cjs',\n      exports: 'named',\n      sourcemap: true,\n      strict: false\n    }\n  ],\n  plugins: [typescript()],\n  external: ['react', 'react-dom', 'prop-types']\n}\n

dist在运行汇总时，如何排除我的测试目录被捆绑到文件中？

我需要构建可跨应用程序使用的可共享 React 组件。

为此，我正在关注以下文章

• https://dev.to/alexeagleson/how-to-create-and-publish-a-react-component-library

我的配置看起来完全一样，除了 npm 软件包版本（甚至尝试使用相同的版本）

文件夹结构如下所示

rollup.config.js

import resolve from "@rollup/plugin-node-resolve";
import commonjs from "@rollup/plugin-commonjs";
import typescript from "@rollup/plugin-typescript";
import dts from "rollup-plugin-dts";

const packageJson = require("./package.json");

export default [
{
 input: "src/index.ts",
 output: [
  {
    file: packageJson.main,
    format: "cjs",
    sourcemap: true,
  },
  {
    file: packageJson.module,
    format: "esm",
    sourcemap: true,
  },
],
plugins: [resolve(), commonjs(), typescript({ tsconfig: "./tsconfig.json" })],
},
{
 input: "dist/esm/types/index.d.ts",
 output: [{ file: "dist/index.d.ts", format: "esm" }],
 plugins: [dts()],
},
];

npm 脚本

"rollup": …

我正在使用 Vite 构建库，构建库时出现以下错误：

Rollup failed to resolve import "node:path"

通过将失败的导入添加到汇总选项中，我可以修复错误，但构建会继续抱怨每次node:*导入。最后我不得不将每一个单独添加到build.rollupOptions.external：

Rollup failed to resolve import "node:path"

虽然这解决了问题，但node单独列出每个导入非常耗时。有没有办法使用某种通配符语法来自动解析所有node导入？

build: {
  rollupOptions: {
    external: [            
      'node:path',           
      'node:https',
      'node:http',
      'node:zlib',
      ... 
    ],
},

我正在开发一个使用该opensea-js包的 Vite 项目。这个包依赖于 xhr2-cookies. 它导入os、http和https一些其他内部节点模块。

尝试调用任何 opensea 方法时出现此错误：

Uncaught (in promise) TypeError: os.type is not a function
    XMLHttpRequest2 xml-http-request.ts:102
    prepareRequest httpprovider.js:61
    sendAsync httpprovider.js:116
    node_modules opensea-js.js:24209

跟踪这个错误来自于构造 useragent 字符串。

我尝试安装rollup-plugin-polyfill-node并将其添加到vite.config.js但仍然收到相同的错误：

import path from 'path'
import vue from '@vitejs/plugin-vue'
import nodePolyfills from 'rollup-plugin-polyfill-node'
import { defineConfig } from 'vite'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src'),
    },
  },
  server: { …

假设我正在构建一个具有一些依赖项的库：react、moment、lodash 和 uuid，并且我想以 ES 和 UMD 格式分发它。

我还对用户应用程序的最终捆绑包大小持谨慎态度。

React 应该进入rollupOptions.external，因为它需要在应用程序中运行单个 React 实例。但其余的呢？

在我看来，库应该避免包含任何外部依赖项，因为如果库用户的应用程序使用相同的依赖项，则这些依赖项可能会被复制。

因此，我想象我的vite.config.js文件如下所示：

const path = require("path");
const { defineConfig } = require("vite");

module.exports = defineConfig({
  build: {
    // Let the library user control minification in their own bundler
    minify: false,
    sourcemap: true,
    lib: {
      entry: path.resolve(__dirname, "source/index.js"),
      name: "my-tiny-library",
      fileName: (format) => `my-tiny-library.${format}.js`,
    },
    rollupOptions: {
      // Add _all_ external dependencies here
      external: ["moment", "uuid", "lodash", "react"],
      output: {
        globals: {
          moment: …

好的，我是第一次使用工具汇总，我喜欢它制作代码的规模很小。摇树很棒。但是，我很难让它正确地包含所有内容。我尝试过使用一个入口点exp.js，从这里从各种文件中导出内容：

export {
    dashboardCharts
} from './dashboard.js';

我的rollup.config.js看起来像

export default {
    // tell rollup our main entry point
    input: [
        'assets/js/exp.js',
    ],

    output: {
      name: 'helloworld',
      file: 'build/js/main.js',
        format: 'iife'
        // format: 'umd'
    },
    plugins: [
        resolve({
            // pass custom options to the resolve plugin
            customResolveOptions: {
              moduleDirectory: 'node_modules'
            }
        }),
        multiEntry()
        // terser(),
    ],
};

该文件dashboard.js包含datatables库，因此数据表包含在捆绑包main.js中。但是，数据表通过测试来测试是否应该采用commonjs路径

else if ( typeof exports === 'object' ) {
    // CommonJS
    module.exports = function (root, $) {

并且我试图在浏览器中执行此操作，因此我不希望使用commonjs路径。汇总的顶级范围声明为

var helloworld = (function (exports) …

我一直在努力学习如何编写树摇动友好的代码,但遇到了一个不可避免的副作用的问题,我不知道如何处理.

在我的一个模块中,我访问全局Audio构造函数并使用它来确定浏览器可以播放哪些音频文件(类似于Modernizr的工作方式).每当我尝试树摇动我的代码时,Audio即使我不在我的文件中导入模块,元素及其所有引用也不会被消除.

let audio = new Audio(); // or document.createElement('audio')
let canPlay = {
  ogg: audio.canPlayType('audio/ogg; codecs="vorbis"').replace(/^no$/, '');
  mp3: audio.canPlayType('audio/mpeg; codecs="mp3"').replace(/^no$/, '');
  // ...
};

我知道包含副作用的代码无法消除,但我找不到的是如何处理不可避免的副作用.我不能只是访问全局对象来创建audio检测功能支持所需的元素.那么我如何处理访问全局浏览器函数/对象(我在这个库中做了很多)的方式,树摇动友好,仍然允许我消除代码？