标签: rollupjs

我开始使用Rollup和D3版本4,它是用ES2015模块编写的.我使用传统的D3命名空间"d3"编写了一些代码.现在我想使用Rollup创建一个自定义包.我想使用树摇晃,因为我可能只使用了d3中大约一半的功能,我希望尽可能保持光线.

我很清楚我可以有选择地导入函数,例如:

import {scaleLinear} from "d3-scale";
import {
      event,
      select,
      selectAll
} from "d3-selection";

这将变得非常冗长,因为d3的一半是很多功能.我可以忍受这一点.更大的问题是它还需要在没有命名空间的情况下完全重写我的所有函数标识符.我不太关心它,因为我更喜欢命名库代码.

我明白我可以导入所有模块:

import * as d3 from "d3";

它保留了d3对象命名空间,这对我的代码组织很有用.但是,Rollup无法将未使用的功能从树中摇出来.

我梦寐以求的是:

import {
      event,
      select,
      selectAll
} as d3 from "d3-selection";

但是这种特征/语法似乎不存在于规范中.如何有选择地定位模块的各个部分,并在导入期间保留命名空间？

我正在编写一个带有 typescript、sass 和 rollup 的 react 组件库，我希望它尽可能独立。

有没有人对如何最好地包含 scss 文件中引用的资产（图像和字体）有任何建议？

一种解决方案可能是某种加载程序（例如 postcss 处理器），用 base64 版本替换 scss 文件中引用的所有图像和字体资产。

有没有人有一个例子可以有效地做到这一点？任何解决方案或建议将不胜感激

我的汇总配置如下所示：

import peerDepsExternal from "rollup-plugin-peer-deps-external";
import resolve from "rollup-plugin-node-resolve";
import typescript from "rollup-plugin-typescript2";
import scss from 'rollup-plugin-scss'
import sass from "rollup-plugin-sass";
import commonjs from "rollup-plugin-commonjs";
import copy from "rollup-plugin-copy";
import url from '@rollup/plugin-url';

import packageJson from "./package.json";

export default {
  input: "src/index.tsx",
  output: [
    {
      file: packageJson.main,
      format: "cjs",
      sourcemap: true
    },
    {
      file: packageJson.module,
      format: "esm",
      sourcemap: true
    }
  ],
  plugins: …

WARNING: No name was provided for external module 'moment' in output.globals – guessing 'momentImported'
WARNING: No name was provided for external module 'odata-parser' in output.globals – guessing 'parser'

当我尝试将我的库绑定到通用模块定义时收到此消息。警告可以通过在 ng-package.json 中添加 umdModuleIds 来修复。

该文件为我们提供了以下解释：

在编写 UMD 包时，ng-packagr 尽最大努力为 UMD 模块标识符提供通用默认值。此外， rollup 将尽最大努力猜测外部依赖项的模块 ID。即使这样，您也应该确保外部依赖项的 UMD 模块标识符是正确的。如果 ng-packagr 不提供默认值并且 rollup 无法猜测正确的标识符，您应该通过在库的包文件部分中使用 umdModuleIds 来明确提供模块标识符，如下所示：...

umdModuleIds：

外部依赖关系及其对应的 UMD 模块标识符的映射。Map 键是 TypeScript / EcmaScript 模块标识符。映射值是 UMD 模块 ID。此映射的目的是正确捆绑 UMD 模块文件（带有rollup）。默认情况下，支持rxjs,tslib 和@angular/*依赖项符号。

如何查找或检查必须添加到 umdModuleIds …

我正在尝试使用 Rollup 和几个 create-react-app 应用程序构建微前端架构原型。但是，当我在本地使用yarn link容器应用程序的外部应用程序时，遇到以下错误：

ReferenceError：React 未定义

23500 | 23500 return / # PURE /React.createElement("div", { | ^ 23501 | id: "container", 23502 | className: "flex flex-col h-screen" 23503 | }, / # PURE /React.createElement(BrowserRouter , null, / # PURE /React.createElement(Header, {

我认为这是因为我们没有React在每个组件/文件的顶部导入，因为 React 17 的新 JSX Transform 允许您不必这样做。我真的希望能够构建我们的微前端包，而不必在每个文件中导入 React，有没有办法做到这一点？

这是 rollup.config.js：

import babel from 'rollup-plugin-babel';
import commonjs from '@rollup/plugin-commonjs';
import external from 'rollup-plugin-peer-deps-external';
import postcss from 'rollup-plugin-postcss';
import resolve from '@rollup/plugin-node-resolve';
import image from …

我正在使用带插件的Rollup.js rollup-plugin-node-resolve并rollup-plugin-commonjs捆绑我的测试,它们使用Sinon.js.当我尝试运行捆绑的文件时,我收到以下错误:

错误:rollup-plugin-commonjs目前不支持动态需求

有没有解决此错误的方法,或者我是否必须使用其他一些工具,如Webpack？

我们有一个架构,其中一个大型应用程序被拆分为多个Angular应用程序,由不同的团队维护,具有不同的部署时间表 ASP.NET上下文中的这些单独的Angular应用程序部署在服务器上,并作为一个大型应用程序运行.每个应用程序都部署在一个单独的应用程序池中,它们都具有相同的布局和框架代码.

每个应用程序都将使用通过使用AOT编译器和模块捆绑器(汇总或webpack 2)优化的捆绑包.每个应用程序还将使用集中式Javascript代码,这些代码需要集中在大型应用程序(框架代码)中.此代码还将使用Angular组件并包含诸如集中布局组件,多个角度服务以及Web api调用等内容......因此每个应用程序都将使用相同的框架代码.

目标还在于,当框架代码发生更改时,任何单个应用程序都不必再次更新和部署.

我看到的标准方法是使用es2015导入,模块捆绑器解释导入,只将必要的代码添加到模块中(树摇动).大多数情况下,您需要的Angular框架内容也包含在捆绑包中(不使用CDN).但在这种情况下,有3个方提供代码:

• Angular和其他供应商代码
• 所有应用程序使用的集中式定制框架代码也使用Angular并提供捆绑包
• 应用程序本身提供一个捆绑

您将如何分割和优化捆绑包？

• 与集中框架代码和应用程​​序需要使用的所有Angular /供应商内容单独捆绑Angular内容将从主捆绑中排除
  • 使用类似CDN的方式集中自定义框架内容并引用该包(在包中没有角度代码)
  • 所以你最终得到这样的东西:

<script src="vendor-bundle.js"></script>
<script src="/central-location/frameworking-bundle.js"></script>
<script src="app-bundle.js">/script>;

在这种特定情况下,最好的方法是什么？我找不到这种架构设置的好例子.

我是第一次使用Rollup(跟随angular.io的例子),我收到了这个错误:

'node_modules/angular2-jwt/angular2-jwt.js'不输出'AuthHttp'

从app.module.js中的这一行:

13:从'angular2-jwt/angular2-jwt'导入{AuthHttp,AuthConfig};

文档说您可以通过在rollup-config.js文件中指定自定义命名导出来纠正此问题,如下所示:

commonjs({
  namedExports: {
    // left-hand side can be an absolute path, a path
    // relative to the current directory, or the name
    // of a module in node_modules
    'node_modules/my-lib/index.js': [ 'named' ]
  }
})

这是我的rollup-config.js文件的相关部分:

  plugins: [
      nodeResolve({jsnext: true, module: true}),
      commonjs({
        include: 'node_modules/rxjs/**',
         namedExports: {
          'node_modules/angular2-jwt/angular2-jwt.js': [ 'AuthHttp' ]
        }
      }),

但是,这没有任何影响,错误仍然存​​在.有关如何纠正此问题的任何建议？

这是我第一次尝试理解/使用汇总。

我正在使用这个样板，因为它全部基于我也喜欢使用的 Three.js。

到目前为止，我当前的（几乎肯定是错误的）方法是：

1. 从 github 下载样板项目

2. 首先，我想了解需要将项目的哪些部分推送到我的网站才能使其“按原样”运行。我成功地做到了这一点，并且可以在我的网站子域之一上看到该项目。

3. 现在我尝试在本地设置我的生产环境。我制作了 github 下载的副本，然后运行npm install​​- 这引入了我的 node_modules 文件夹并下载了所有依赖项。我在全球范围内安装了 rollup。

4. 接下来我运行rollup watch- 希望它能够持续更新我的构建文件。这是我收到错误的时候：

Error: Could not resolve entry module (watch).
        at error (C:\Users\Shadow\AppData\Roaming\npm\node_modules\rollup\dist\shared\rollup.js:213:30)
        at ModuleLoader.loadEntryModule (C:\Users\Shadow\AppData\Roaming\npm\node_modules\rollup\dist\shared\rollup.js:17642:16)
        at async Promise.all (index 0)

Run Code Online (Sandbox Code Playgroud)

我的配置文件如下所示：

import resolve from '@rollup/plugin-node-resolve'; // locate and bundle dependencies in node_modules (mandatory)
import { terser } from "rollup-plugin-terser"; // code minification (optional)

export default {
    input: 'src/main.js',
    output: [
        {
            format: 'umd',
            name: 'LIB',
            file: 'build/main.js' …

我正在为 Svelte 构建一个 NPM 包。通过这个包，我导出了几个简单的组件：

import SLink from './SLink.svelte';
import SView from './SView.svelte';

export { SLink, SView };

这是在使用汇总将它们捆绑到缩小版本之前。

汇总配置：

module.exports = {
    input: 'src/router/index.ts',
    output: {
        file: pkg.main,
        format: 'umd',
        name: 'Router',
        sourcemap: true,
    },
    plugins: [
        svelte({
            format: 'umd',
            preprocess: sveltePreprocess(),
        }),
        resolve(),
        typescript(),
        terser(),
    ],
};

package.json（减去不必要的信息）：

{
    "name": "svelte-dk-router",
    "version": "0.1.29",
    "main": "dist/router.umd.min.js",
    "scripts": {
        "lib": "rollup -c lib.config.js",
    },
    "peerDependencies": {
        "svelte": "^3.0.0"
    },
    "files": [
        "dist/router.umd.min.js"
    ],
}

当我发布包并测试它时，出现以下错误：

Uncaught Error: 'target' is …

有没有办法为 vitest 使用不同的 tsconfig 文件？

我有一个使用 vue-cli 的大型项目。在将其转换为基于 vite 之前，我首先想使用 vitest 而不是 jest。问题是 tsconfig.json 文件使用“target: es2015”，对于 vitest，它应该是“target: esnext”