由于另一个问题，我必须在 vue3 应用程序中静态导入 HTML 中的 JS 依赖项。
/index.html
<head>
<!-- ... -->
<script type="module" src="node_modules/@telekom/scale-components-neutral/dist/scale-components/scale-components.esm.js"></script>
</head>
由于 Vite 无法正确捆绑此依赖项（由于问题，请参阅上面提到的帖子），我希望捆绑忽略它。在生产版本中，我希望 JS 模块按原样导入到 root 中index.html。
我尝试了配置属性中的几乎所有内容optimizeDeps.exclude，但 Vite 仍然尝试分析和预捆绑它。
vite.config.ts
export default defineConfig({
optimizeDeps: {
exclude: [
// I tried pretty much everything here: no way to force vite pre-bundling to ignore it...
'scale-components-neutral'
'@telekom/scale-components-neutral'
'@telekom/scale-components-neutral/**/*'
'@telekom/scale-components-neutral/**/*.js'
'node_modules/@telekom/scale-components-neutral/**/*.js'
],
},
// ...
});
在每种情况下，运行后npm run build，导入都会从 中删除dist/index.html。
配置期望什么optimizeDeps.exclude？
编辑
我正在尝试设置汇总以使用SCSS样式表和Lost网格系统,这需要通过PostCSS进行解析.我已经验证SCSS正在被正确解析,但PostCSS处理器似乎没有任何影响.
根据rollup-plugin-sass文档,我只需要将vanilla JS函数传递给该processor选项.这没有错误,但生成的CSS没有什么不同.
这是我的汇总配置,用rollup -c config/dev.js:
// Rollup plugins.
import babel from 'rollup-plugin-babel';
import cjs from 'rollup-plugin-commonjs';
import globals from 'rollup-plugin-node-globals';
import replace from 'rollup-plugin-replace';
import resolve from 'rollup-plugin-node-resolve';
import sass from 'rollup-plugin-sass';
import postcss from 'postcss';
const postcssProcessor = postcss([require('autoprefixer'), require('lost')]);
export default {
dest: 'dist/app.js',
entry: 'src/index.jsx',
format: 'iife',
plugins: [
resolve({
browser: false,
main: true
}),
sass({
// processor: postcssProcessor,
output: 'dist/styles.css'
}),
babel({
babelrc: false,
exclude: 'node_modules/**',
presets: [ …我使用create-react-app创建了我的React应用程序,现在使用带有create-react-app-typescript的 TypeScript .
一切正常,但问题是 - 特别是因为我使用了好但重的材料 - ui - 构建的捆绑的大小非常大 - 几乎达到1MB.
我怎样才能使用树摇动工具(比如Webpack 2或汇总？我不想eject这样看起来我似乎无法访问Webpack配置.
我希望有可能树摇一个缩小的代码:)
谢谢!
我正在测试驱动 rollupjs将一个节点应用程序打包成一个bundle.js并且很困惑。
rollup 是否支持捆绑完整的节点应用程序（包括
node_modules），或者只是作为项目一部分的 js 文件？
我有一个标准的节点项目（1 个index.js，中的数千个文件node_modules）并且只想要一个bundle.js. 我试过：
汇总.config.js：
import commonjs from 'rollup-plugin-commonjs';
import nodeResolve from 'rollup-plugin-node-resolve';
export default {
entry: 'index.js',
dest: 'bundle.js',
format: 'iife',
plugins: [
commonjs({
// non-CommonJS modules will be ignored, but you can also
// specifically include/exclude files
include: 'node_modules/**', // Default: undefined
// if true then uses of `global` won't be dealt with by this plugin
ignoreGlobal: false, // Default: …我正在构建一个 React 组件库，其源代码采用以下通用结构：
- src
- common.scss (contains things like re-usable css variables)
- components
- button
- index.js
- button.scss
- dialog
- index.js
- dialog.scss
我的组件负责导入它们自己的每个组件样式（使用 scss），例如，button/index.js有这样一行：
import "./button.scss";
到目前为止，在我的应用程序中，我一直在直接从源中使用我的库，如下所示：
// app.js
import "mylib/src/common.scss" // load global styles
import Button from 'mylib/src/components/button/index.js'
import Dialog from 'mylib/src/components/dialog/index.js'
// ...application code...
当我的应用程序使用 webpack 和 时style-loader，每个组件的 css 会style在head首次使用该组件时作为标签动态添加。这是一个很好的性能优势，因为在实际需要之前，浏览器不需要解析每个组件的样式。
不过，现在我想使用Rollup分发我的库，因此应用程序使用者会执行以下操作：
import { Button, Dialog } from 'mylib'
import "mylib/common.css" // load global …配置Rollupjs生成库时，如果输入是由多个javascript文件组成的数组。我们如何才能将这些输入生成为一个输出 js 文件呢？
export const lgService = {
input: [
'./src/app/services/livegiver/lgservices.js',
'./src/app/services/readable-stream.js'
],
output: {
file: outputPath + 'LiveGiver/index.js',
format: 'es'
}
}
预期的：
Input: [a.js, b.js]
Output: dist/index.js
实际的：
Input: [a.js, b.js]
Output: dist/a.js; dist/b.js
我有一个项目，我使用 webpack 并想切换到 rollup.js，但是我在插件 @rollup/plugin-commonjs 方面遇到了麻烦。
import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import babel from 'rollup-plugin-babel';
import { terser } from 'rollup-plugin-terser';
import nodePolyfills from 'rollup-plugin-node-polyfills';
const config = {
input: 'site/templates/scripts/master.js',
output: [
{
file: 'site/templates/scripts/master.min.js',
format: 'cjs'
}
],
plugins: [
nodePolyfills(),
resolve({
browser: true
}),
commonjs({
include: /node_modules/,
namedExports: {
'react': ["useState", "useEffect"],
'@apollo/client': ['ApolloProvider', 'ApolloClient', 'HttpLink', 'InMemoryCache', 'useQuery', 'gql'],
'styled-components': [ 'styled', 'css', 'ThemeProvider' ]
}
}),
babel({
babelrc: true,
exclude: 'node_modules/**' …每次为生产而构建时，我都会收到此警告。当我为生产构建时，我在汇总输出配置中禁用源映射。
output: [{ dir: "...", format: "...", sourcemap: isProd ? false : true }]
我使用的开发和生产，同样tsconfig tsconfig.json：
{
"compilerOptions": {
// Output
"target": "ESNext",
"module": "ESNEXT",
"sourceMap": true,
"jsx": "react",
"noEmit": true,
// Compile time code checking
"strict": true,
// Libraries
"lib": ["dom", "esnext"],
// Imports
"moduleResolution": "node",
"allowSyntheticDefaultImports": true,
"esModuleInterop": true
},
"exclude": ["dist", "app"]
}
我知道这是查看汇总插件源代码时出现警告的原因：
/**
* Validate that the `compilerOptions.sourceMap` option matches `outputOptions.sourcemap`.
* @param context Rollup plugin context used to emit warnings.
* @param compilerOptions …我目前正在尝试为 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'
我正在编写一个带有 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: …