如果所有依赖项都应嵌入到（胖）结果包中，我该如何配置 rollup.js（=> 配置文件“rollup.config.js”）（特别是：如何配置汇总参数“globals”、“external”） ", "plugins.babel.exclude")？
假设我做过类似的事情：
> npm install dependency1 --save-dev
> npm install dependency2 --save-dev
索引文件 (index.js) 看起来像：
import D1 from 'dependency1'
import D2 from 'dependency2'
[...]
export default SomethingThatUsesD1AndD2
=> 生成的包应该是一个包含所有内容的胖文件
是否可以使用 Vite（普通）包含共享 HTML 的片段？我正在寻找一种无需通过 JS 注入即可预渲染 HTML 的方法。
就像是：
<html>
<head>
{ include 'meta-tags' }
</head>
<body>
{ include 'nav' }
<h1>Hello World</h1>
<body>
</html>
我想安装rollup-plugin-visualizer，但需要更新汇总。
更新汇总从1.8.0到3.1.0
出现错误
[!] RollupError: Node tried to load your configuration file as CommonJS even though it is likely an ES module. To resolve this, change the extension of your configuration to ".mjs", set "type": "module" in your package.json file or pass the "--bundleConfigAsCjs" flag.
删除node-modules文件夹和package-lock.json并再次安装npm i
出现错误
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: @bet-core/ui@2.4.0
npm ERR! Found: rollup@3.1.0
npm ERR! node_modules/rollup …我with rollup在我的SQL查询中使用.我没有获得汇总的别名.
我的SQL是
SELECT [Column1],
sum([Column2])
FROM Tablea
GROUP BY [Column2] WITH ROLLUP
哪个回报
s 8
t 8
j 8
null 24
如何更换NULL总排？
看来我们可以使用打字稿来编写汇总配置文件。说，我可以创建一个名为 的文件rollup.config.ts，内容为：
import typescript from 'rollup-plugin-typescript2';
export default {
input: 'main.ts',
plugins: [typescript()],
output: {
file: 'bundle.js',
format: 'cjs',
},
external: ['lodash']
}
如果我将汇总调用为rollup -c rollup.config.ts.
但是如果我在其中使用一些类型：
import typescript from 'rollup-plugin-typescript2';
import {RollupFileOptions} from "rollup";
const config: RollupFileOptions = {
input: 'main.ts',
plugins: [typescript()],
output: {
file: 'bundle.js',
format: 'cjs',
},
external: ['lodash']
}
export default config;
它会报告如下错误：
$ rollup -c rollup.config.ts
[!] Error: Unexpected token
rollup.config.ts (4:12)
2: import {RollupFileOptions} from "rollup";
3:
4: const …我有一个与汇总捆绑在一起的React 组件库。然后我在使用 create-react-app 的应用程序设置中使用该库，该应用程序在后台使用 Webpack。我希望 Webpack 对组件库进行 tree-shake。在构建应用程序包并对其进行分析后，我发现该库要么根本没有摇树，要么摇树在库上不起作用，因为它首先不可摇树。为什么摇树不起作用？我究竟做错了什么？
? rollup.config.js（React 组件库的打包配置）
import babel from 'rollup-plugin-babel'
import commonjs from 'rollup-plugin-commonjs'
import autoExternal from 'rollup-plugin-auto-external'
import resolve from 'rollup-plugin-node-resolve'
import reactSvg from 'rollup-plugin-react-svg'
import url from 'rollup-plugin-url'
import string from 'rollup-plugin-string'
import pureanno from 'rollup-plugin-pure-annotation'
import pkg from './package.json'
const { getSVGOConfig } = require('./scripts/getSVGOConfig')
const MAX_INLINE_FILE_SIZE_KB = 100
export default {
input: 'src/index.js',
output: [
{
file: pkg.module,
format: 'es',
},
],
plugins: [
autoExternal(),
babel({ …当浏览器现在支持原生 ESM 时，为什么开发人员仍然需要使用 rollup 和 webpack 等模块捆绑器
我正在使用 Typescript + Vite + Single SPA 只是尝试复制https://github.com/joeldenning/vite-single-spa-example 和https://github.com/joeldenning/vite-single-spa-root-配置。
因此，在我的 index.ejs 中我有
<script type="systemjs-importmap">
{
"imports": {
"@org/root-config": "//localhost:9000/org-root-config.js",
"@my/module": "http://127.0.0.1:8080/assets/index.d4261135.js"
}
}
在 org-root-config.js 中我有
import { registerApplication, start } from "single-spa";
registerApplication({
name: "@my/module",
app: () => System.import("@my/module"),
activeWhen: "/",
});
start({
urlRerouteOnly: true,
});
关于MF本身，我有以下Vite配置：
import vue from '@vitejs/plugin-vue';
import { nodeResolve } from '@rollup/plugin-node-resolve';
export default {
rollupOptions: {
input: 'src/main.ts',
format: 'system',
preserveEntrySignatures: true,
},
base: 'http://localhost:3000',
plugins: [
vue({
template: { …我目前正在尝试为 React 构建一个 UI 库，但遇到了一些麻烦。目前我正在使用打字稿和汇总，我能够捆绑单个组件index.js，并且能够导入这些组件，但它正在导入整个库。
现在：
文件结构：
src
--components
-----button
-------button.tsx
-------button.types.ts
-----input
-------input.tsx
-------input.types.ts
-----index.ts
rollup.js
我的汇总目标index.ts将所有内容导出为这样：
src
--components
-----button
-------button.tsx
-------button.types.ts
-----input
-------input.tsx
-------input.types.ts
-----index.ts
rollup.js
我可以像这样导入反应项目：
export { default as Button} from './button/button'
export { default as Input } from './input/input'
我想要做什么 我希望每个组件都单独捆绑，并且像这样导入
import { Button, Input } from 'my-library'
我尝试过的：
阅读文档后，似乎这就是preserveModule: true我正在寻找的内容，但后来我尝试按照上面的方式导入，但它开始抱怨没有找到任何东西。
我当前的 rollup.js 如下所示：
import { Input } from 'my-library/input'
import { Button } from 'my-library/button'
rollup ×10
javascript ×4
rollupjs ×4
vite ×3
babeljs ×2
reactjs ×2
webpack ×2
module ×1
package ×1
single-spa ×1
sql ×1
t-sql ×1
templates ×1
tree-shaking ×1
typescript ×1
vue.js ×1