rollupjs 相关问题

Rollup.js是下一代JavaScript Transpiler和模块捆绑器

交换到 pnpm 后构建失败：RollupError：意外字符 '\x7F' （由节点画布 / pdf.js 中的解析错误引起）

提前感谢您的帮助。 TL;DR：我在构建时从节点画布和 pdf.js 冒泡时遇到解析错误。这是由 Rollup 读取 canvas.node 二进制文件引起的，它甚至不应该出现在

svelte pdf.js rollupjs pnpm node-canvas

回答 1 投票 0

使用 Rollup 捆绑我的库时如何解析 .jsx 文件？

我正在使用故事书和汇总构建一个组件库。这是我的 rollup.config.mjs /* eslint-禁用导入/无无关依赖项 */ 从'rollup-plugin-peer-deps-

javascript reactjs typescript storybook rollupjs

回答 1 投票 0

React 在第一次渲染时为空

我正在使用我们的自定义库，它与 Vite 捆绑在一起，但不包括 React，我检查了一下，我只有一个 React 实例，并且定义了 React。但在第一个渲染中我看到了

reactjs vite rollupjs vite-plugin-ssr

回答 1 投票 0

Vite库模式与rollup

Vite 彻底改变了前端 js/ts 应用程序的 Web 开发。由于是基于rollup并且支持library模式，不知道直接用ro构建js库还有什么优势...

vite rollup rollupjs

回答 1 投票 0

使用 Rollup 和 babel 捆绑远程 React 项目

我正在尝试获取一个远程 React 项目（使用打字稿）并将其与 Rollup 捆绑在一起。这是我到目前为止的设置：获取远程 React 项目并将其存储在临时文件夹中使用 Rollup

javascript typescript babeljs bundler rollupjs

回答 1 投票 0

汇总不排除排除的软件包

我正在使用 Rollup 来捆绑许多 React 组件。这些组件使用 styled-components 进行样式化。我在 options.external 中包含了 styled-components、react 和其他一些包...

javascript reactjs styled-components rollupjs

回答 2 投票 0

无法读取 null 的属性（读取“useRef”）错误

各位！我有一个关于 useRef 的问题。我正在使用 rollupJS 捆绑一个小型 UI 库。在我捆绑库之前，内部带有 useRef 的组件工作正常，但是当我尝试导入它时我......

reactjs react-hooks rollupjs use-ref

回答 1 投票 0

资源动态加载时出现CORS跨域错误

我面临错误：类型错误：无法解析模块说明符“../static/myJson.json”。基本 URL 为 about:blank，因为 import() 是从 CORS 跨源脚本调用的。在运行时当...

google-chrome cors es6-modules rollupjs javascript-import

回答 1 投票 0

使用 rollup.js 创建 React 库时出现错误 null（读取“useState”）

我使用 rollup.js 创建一个 React 库，但是当我运行 npm run build 时出现错误就好像尝试从 null 检索 useState 钩子未捕获的类型错误：无法读取 null 的属性（r...

reactjs rollupjs

回答 2 投票 0

Babel 转换未由 rollup 应用

我想对 rollup 生成的代码应用一些 babel 转换。我想将 @rollup/plugin-babel 插件与 babel-plugin-import 一起使用，但它对汇总输出没有影响，我不...

javascript babeljs rollupjs

回答 1 投票 0

Vercel astrojs 构建错误入口模块“@astro-renderers”不能是外部

如果 vercel hook 运行部署，我会收到此错误。我的 git 存储库位于 github.com 上，我将该存储库连接到 vercel.com。我重组了我的项目，现在我变得很奇怪

javascript vercel rollupjs astro

回答 0 投票 0

ckeditor 5 插件无法与 svelte 一起使用

我正在尝试让具有 html 支持的 ckeditor 在 svelte 中工作。从 'svelte' 导入 { onMount }；从 '@ckeditor/ckeditor5-build-classic' 导入 ClassicEditor；重要...</desc> <question vote="0"> <ol> <li>我正在尝试让 ckeditor 支持 html，以便在 svelte 中工作。</li> </ol> <pre><code><script> import { onMount } from 'svelte'; import ClassicEditor from '@ckeditor/ckeditor5-build-classic'; import { FullPage } from '@ckeditor/ckeditor5-html-support'; export let text = ""; onMount( () => { ClassicEditor.create( document.querySelector( '#editor' ), {plugins : [FullPage]}) .then( editor => { console.log( editor ); editor.setData( text ); editor.model.document.on( 'change:data', () => { text = editor.getData(); } ); } ) .catch( error => { console.error( error ); } ); }); </script> <textarea id='editor'></textarea> </code></pre> <h3>✔️预期结果</h3> 我希望上面的代码能够生成一个支持 html 的 ckeditor 实例。 <h3>❌实际结果</h3> 我的 js 使用 rollup 构建时出现以下错误 <pre><code>(!) Circular dependencies node_modules/@ckeditor/ckeditor5-engine/src/view/position.js -> node_modules/@ckeditor/ckeditor5-engine/src/view/treewalker.js -> node_modules/@ckeditor/ckeditor5-engine/src/view/position.js node_modules/@ckeditor/ckeditor5-engine/src/view/documentselection.js -> node_modules/@ckeditor/ckeditor5-engine/src/view/selection.js -> node_modules/@ckeditor/ckeditor5-engine/src/view/documentselection.js node_modules/@ckeditor/ckeditor5-engine/src/model/position.js -> node_modules/@ckeditor/ckeditor5-engine/src/model/treewalker.js -> node_modules/@ckeditor/ckeditor5-engine/src/model/position.js ...and 4 more created static/js/bundle.js in 13.7s </code></pre> <h3>❓可能的解决方案</h3> 如果我从插件数组中删除该行以及 FullPage，那么我就没有问题了。 <pre><code>import { FullPage } from '@ckeditor/ckeditor5-html-support'; </code></pre> 编辑器将被实例化。这可能是我的 rollup.config.js 的问题 -- <pre><code>import svelte from 'rollup-plugin-svelte'; import resolve from '@rollup/plugin-node-resolve'; import commonjs from '@rollup/plugin-commonjs'; import livereload from 'rollup-plugin-livereload'; import { terser } from 'rollup-plugin-terser'; import css from "rollup-plugin-css-only"; import autoPreprocess from 'svelte-preprocess'; import copy from 'rollup-plugin-copy'; import scss from 'rollup-plugin-scss'; import polyfillNode from 'rollup-plugin-polyfill-node'; import svg from 'rollup-plugin-svg'; const production = !process.env.ROLLUP_WATCH; export default { input: 'svelte-components/src/main.js', // (1) output: { sourcemap: true, format: 'iife', name: 'app', file: 'static/js/bundle.js' }, plugins: [ svg(), css({ output: "extra_bundle.css" }), scss({ fileName: "bootstrap.css", failOnError: true, runtime: require("sass"), }), svelte({ // enable run-time checks when not in production dev: !production, // we'll extract any component CSS out into // a separate file - better for performance css: css => { css.write('bundle.css'); // (3) } }), // If you have external dependencies installed from // npm, you'll most likely need these plugins. In // some cases you'll need additional configuration - // consult the documentation for details: // https://github.com/rollup/plugins/tree/master/packages/commonjs resolve({ browser: true, dedupe: ['svelte'] }), commonjs(), // In dev mode, call `npm run start` once // the bundle has been generated !production && serve(), // Watch the `public` directory and refresh the // browser on changes when not in production !production && livereload('svelte-components'), // (4) // If we're building for production (npm run build // instead of npm run dev), minify production && terser(), copy({ targets: [ { src: 'node_modules/bootstrap/dist/js/bootstrap.min.js', dest: 'static/js' }, ], verbose: true, }), polyfillNode(), // Add this plugin terser() ], watch: { clearScreen: false } }; function serve() { let started = false; return { writeBundle() { if (!started) { started = true; require('child_process').spawn('npm', ['run', 'start', '--', '--dev'], { stdio: ['ignore', 'inherit', 'inherit'], shell: true }); } } }; } </code></pre> 如果您想尽快看到此问题得到解决，请在这篇文章中添加👍反应。 </question> </body></html>

javascript ckeditor svelte rollupjs ckeditor5

回答 0 投票 0

Vite、NPM、React 组件库无效的 hook 调用、外部问题？

我能够将我的 React 组件库捆绑在 Rollup 中，但我想要 Vite 的功能进行开发并在周末安装。我的问题是现在我收到以下错误...

reactjs npm vite rollupjs

回答 1 投票 0

如何为 TypeScript React 组件库设置汇总配置？

我正在使用打字稿创建一个反应组件库，但在使用组件时遇到问题。我目前只有一个按钮组件，因为我刚刚开始这个项目。

javascript reactjs typescript components rollupjs

回答 0 投票 0

Rollup ESM 生成损坏的导入

我想将打字稿反应应用程序作为组件捆绑到 ES 模块或 UMD 中。但是生成的 ES bundle 产生了一个无效的模块 js。在捆绑包上，它给了我这个提示。但我找不到任何解决方案...

reactjs typescript rollupjs

回答 2 投票 0

rollup.js 实时重新加载不更新

我正在使用 Rollup.js 构建一个 React 应用程序，并尝试使用实时重新加载来获得更好的 DX。我安装了所有软件包，第一次运行时一切看起来都很好。当我尝试更新我的源代码时，...

javascript reactjs typescript docker rollupjs

回答 1 投票 0

如何将带有公共文件夹的 React vite 应用程序部署到我域中的子文件夹？

我正在尝试将带有 vite 作为捆绑器的 React 应用程序部署到我域中的子文件夹（即 https://example.com/my-app）。我的vite.config.ts如下：导入 { defineConfig } 从“...

reactjs deployment vite rollupjs

回答 1 投票 0

如何使用 MagicString 提供带有 Rollup 的 `renderChunk` 钩子的 sourcemap？

我需要对 Rollup 的输出做一些后期处理，所以我有一个使用 magic-string 的插件，如下所示： { name: '后处理', 渲染块（代码，块，选择）{ ...

rollupjs

回答 0 投票 0

如何在使用 vite 构建应用程序时从捆绑包中排除 JS 脚本？

由于另一个问题，我必须在我的 vue3 应用程序中以 HTML 静态导入 JS 依赖项。 /index.html 由于<a href="https://stackoverflow.com/questions/72530354/unable-to-load-external-component-script-with-vue3-using-vite">另一个问题</a>，我必须在我的 vue3 应用程序中以 HTML 静态导入 JS 依赖项。 <pre><code>/index.html</code></pre> <pre><code><head>  <script type="module" src="node_modules/@telekom/scale-components-neutral/dist/scale-components/scale-components.esm.js"></script> </head> </code></pre> 由于 Vite 无法正确捆绑此依赖项（由于问题，请参阅上面提到的帖子），我希望捆绑忽略它。在生产构建中，我希望 JS 模块按原样导入根<pre><code>index.html</code></pre>. 我几乎尝试了<pre><code>optimizeDeps.exclude</code></pre>配置属性中的所有内容，但Vite仍然尝试分析和预捆绑它。 <pre><code>vite.config.ts</code></pre> <pre><code>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' ], }, // ... }); </code></pre> 在每种情况下，在运行 <pre><code>npm run build</code></pre> 之后，导入已从 <pre><code>dist/index.html</code></pre> 中删除。 <pre><code>optimizeDeps.exclude</code></pre> 配置需要什么？ <hr/> 编辑 遵循此注释，在<a href="https://vitejs.dev/guide/dep-pre-bundling.html" rel="noreferrer">https://vitejs.dev/guide/dep-pre-bundling.html</a>: <blockquote> Dependency pre-bundling只适用于开发模式，使用esbuild将依赖转化为ESM。在生产构建中，使用 @rollup/plugin-commonjs 代替。 </blockquote> 我试图指定<pre><code>build.commonjsOptions.exclude</code></pre>配置。 <pre><code>vite.config.js</code></pre> <pre><code>export default defineConfig({ build: { commonjsOptions: { exclude: [ 'scale-components-neutral', 'node_modules/@telekom/scale-components-neutral', 'node_modules/@telekom/scale-components-neutral/**/*', 'node_modules/@telekom/scale-components-neutral/**/*.js', '/node_modules/@telekom/scale-components-neutral', '/node_modules/@telekom/scale-components-neutral/**/*', '/node_modules/@telekom/scale-components-neutral/**/*.js', '**/node_modules/@telekom/scale-components-neutral', '**/node_modules/@telekom/scale-components-neutral/**/*', '**/node_modules/@telekom/scale-components-neutral/**/*.js', '@telekom/scale-components-neutral', '@telekom/scale-components-neutral/**/*', '@telekom/scale-components-neutral/**/*.js', '**/node_modules/@telekom/scale-components-neutral/dist/scale-components/scale-components.esm.js', ], }, }, // ... </code></pre> 不再成功：导入剧照从<pre><code>dist/index.html</code></pre>中消失。 <hr/> 编辑2 <a href="https://rollupjs.org/guide/en/#external" rel="noreferrer"><pre><code>build.rollupOptions.external</code></pre></a>和<a href="https://github.com/rollup/plugins/tree/master/packages/dynamic-import-vars#exclude" rel="noreferrer"><pre><code>build.dynamicImportVarsOptions.exclude</code></pre></a>很有前途（因为最初的问题涉及动态导入......）。 但没有更多的运气：JS 依赖仍然捆绑不当。它适用于本地开发人员，但不适用于使用 <pre><code>npm run build</code></pre>. 构建的已部署应用程序 </question> <answer tick="false" vote="0"> 要回答您的一般问题，您可以使用 <a href="https://www.npmjs.com/package/vite-plugin-external" rel="nofollow noreferrer">vite-plugin-external</a> 告诉 <pre><code>vite</code></pre> 获得 <pre><code>stuff</code></pre> <pre><code>import { stuff } from 'xyz' </code></pre> 来自<pre><code>window.XYZ.stuff</code></pre>. 用法： <pre><code>import createExternal from 'vite-plugin-external'; import vue from '@vitejs/plugin-vue'; export default defineConfig({ plugins: [ createExternal({ externals: { xyz: 'XYZ' } }), vue() ] }); </code></pre> <hr/> 但在你的情况下似乎没有必要。在 vite4 + vue3 应用程序中使用 ScaleComponents： main.js： <pre><code>import { createApp } from "vue"; import "@telekom/scale-components/dist/scale-components/scale-components.css"; import { applyPolyfills, defineCustomElements, } from "@telekom/scale-components/loader"; import App from "./App.vue"; applyPolyfills().then(() => { defineCustomElements(window); }); const app = createApp(App); app.config.compilerOptions.isCustomElement = (tag) => tag.startsWith("scale-"); app.mount("#app"); </code></pre> 现在您可以在您的应用程序中使用<pre><code><scale-*></code></pre>组件。 <hr/> 或者，您可以使用 <pre><code>vite.config.js</code></pre> 声明自定义元素： <pre><code>import vue from '@vitejs/plugin-vue'; export default { plugins: [ vue({ template: { compilerOptions: { isCustomElement: (tag) => tag.startsWith('scale-') } } }) ] }; </code></pre> ...并简化将应用程序安装到： <pre><code>createApp(App).mount("#app") </code></pre> <a href="https://codesandbox.io/p/sandbox/vue3-vite-forked-1egmdb?file=%2Findex.html" rel="nofollow noreferrer">工作演示</a> </answer> </body></html>

vuejs3 vite rollupjs

回答 0 投票 0

Rollup js 停止导入内置节点模块

我正在使用 rollup 来捆绑我的组件。在某个地方，我认为它有 TextEncoder 作为对等依赖。在与 rollup 捆绑时，它添加了 import 语句 import {TextEncoder} from "util" ，

node.js bundler rollup rollupjs

回答 0 投票 0

rollupjs 相关问题

最新问题