标签: rollup

目前，我已经建立了一个 Vite 2 项目作为monaco-editor依赖项。

每当我尝试使用它时，它都会说工人不是进口的。

editorSimpleWorker.js:454 Uncaught (in promise) Error: Unexpected usage
    at EditorSimpleWorker.loadForeignModule (editorSimpleWorker.js:454)
    at webWorker.js:38

由于我使用的是 Vite 2，我假设只需rollup-plugin-monaco-editor在插件数组中指定汇总插件即可。但是，我仍然遇到这个问题。

editorSimpleWorker.js:454 Uncaught (in promise) Error: Unexpected usage
    at EditorSimpleWorker.loadForeignModule (editorSimpleWorker.js:454)
    at webWorker.js:38

有没有合适的方法导入monaco-editor到Vite 2项目中？

我的 rollup + vue 2 设置出现问题，并在网上获取了相互冲突的信息。我的汇总配置：

import vue from 'rollup-plugin-vue';
import postcss from 'rollup-plugin-postcss';
import sass from 'rollup-plugin-sass';
import image from '@rollup/plugin-image';
import babel from 'rollup-plugin-babel';
import resolve from 'rollup-plugin-node-resolve';
import commonjs from 'rollup-plugin-commonjs';

const plugins = [
    vue({
        preprocessStyles: true,
        css: true,
        compileTemplate: true
    }),
    commonjs({ extensions: ['.js'] }),
    postcss(),
    sass(),
    image(),
    resolve({
        jsnext: true,
        main: true,
        browser: true
    }),
    babel({ exclude: 'node_modules/**', include: '**/*.js' })
];

export default {
    input: 'src/main.js',
    output: {
        dir: 'diss',
        format: 'iife',
        sourcemap: …

我想尝试汇总一个 vue 组件库。但我在类型检查时遇到错误。我尝试更新打字稿，正如这里提到的，但它不起作用。这是我的代码和package.json 我的组件代码，已导出为Button

 <template>
  button
    >{{ children }}</button>
</template>

<script lang="tsx">

declare type IconMode =
  | {
      iconMode?: "without-icon";
    }
  | {
      iconMode: "with-icon" | "icon-only";
      iconName: string;
    };
 ...
 </script>

rollup.config.js 是：

import commonjs from "@rollup/plugin-commonjs"; 
import vue from "rollup-plugin-vue"; 
import buble from "@rollup/plugin-buble"; 
import typescript from "@rollup/plugin-typescript";


export default {
  input: "src/index.ts",
  output: {
    name: "Button",
    exports: "named"
  },
  plugins: [
    typescript(),
    vue({
      css: true, 
      compileTemplate: true 
    }),
    commonjs()
  ]
};

但我在终端上收到此错误：

[!] …

我正在开发一个基于 Yarn Workspaces 的 monorepo 项目，具有以下结构，我想知道如何使用带有 vite 的别名来使用相同的别名，例如“@composables”根据本地存储库指向不同的位置它是从调用的。因此，例如，如果我有2个包，“@composables”应该指向“/package-a/composables/”（如果我在package-a中使用它），并且应该指向“/package-b/composables/”（如果我在中使用它） package-b 内的 vue 组件。

我尝试使用以下内容，但它没有解析到正确的位置

resolve: {
    alias: [
        { find: '@composables', replacement: './composables.json' },
    ],
  },

这是项目结构

project-root/
   vite.config.ts
    packages/
        package-a/
        tsconfig.json
            src/
               composables/
               index.ts
            ....
        package-b/
            src/
               composables/
               index.ts
            tsconfig.json
             ...
             ```

我正在处理两个不同的存储库，lib并且apps.

\n

• lib有一些用MUI制作的 React 组件，我想在 中使用apps它们，并且是用 Rollup 构建的。

  \n
\n

• apps是一个带有 Next.js 应用程序的 Lerna monorepo，该应用程序lib作为依赖项导入以使用其组件，可以自定义将它们包装在<ThemeProvider>自定义主题中。

  \n
\n

但是，这不起作用，因为存在 MUI / 的重复实例ThemeProvider，我可以通过将其添加到lib\ 的入口点来验证：

if (process.browser) {\n  (window as any)._React = React;\n  (window as any)._ThemeProvider = ThemeProvider;\n}\n

然后将其放入apps\'：

if (process.browser) {\n  const {\n    _React,\n    _ThemeProvider,\n  } = window as any;\n\n  console.log(_React ? (_React === React ? "\xe2\x9c\x85 …

有人知道如何在汇总观察程序触发时运行代码吗？我看到了一些关于捕获观察程序事件的引用，例如“开始”，但我使用的是 rollup.config.js 文件，并且我不知道在哪里以及如何检查此类事件。仅供参考，我正在学习服务工作人员，并且每当我的源代码发生更改时，我想修改服务工作人员文件（附加“\n”就足够了）。

如果我用 Javascript 编写一个库，与 Rollup 或 Webpack 之类的东西捆绑比仅使用 Babel 进行转译有什么优势？我唯一能想到的是，如果我只是进行转译，那么也许我的所有依赖项实际上都可能是对等依赖项（尽管我不能 100% 确定这是否属实）。但是，如果我正在做一个相对普通的 React 组件（或者我正在构建一个更大的库（例如material-ui）），我可能希望它们成为对等依赖项，所以如果我依赖的话，这才应该是一个问题无论如何，我的消费者不太可能安装多个较小的库。此外，如果我只是进行转译，理论上消费者可以更轻松地导入他们想要的部分（因为每个文件都将被转译并可导入），而不是在捆绑器中使用复杂的配置来输出多个包。

我错过了什么吗？捆绑程序是否为我做了一些工作，作为库开发人员，我想要的不仅仅是确保代码在旧版浏览器中更直接可用，而旧版浏览器可能无法实现我想要使用的现代语言功能？

版本

3.0.0-beta.18

复制链接

https://github.com/anandkumarram/vue3lib
https://github.com/anandkumarram/vue3App

重现步骤

1. 在 vue3lib -> run : npm run build:es -> 它将生成 vue3lig.esm.js （使用 rollup-plugin-vue 捆绑） rollup.config.js : vue3lib\build\rollup.config.js
   vue3lig.esm.js : vue3lib\dist\vue3lib.esm.js

2. 在 vue3App -> run 中： npm install --save ../vue3Lib && npm runserve。我在 vue3App 中使用了 vue3lib 作为插件，并使用了组件名称“sample”。

预期是什么？

从捆绑包（vue3lib.esm.js）加载的所有组件都应该具有组件实例值

到底发生了什么？

1. Closure 对象中的 currentinstance 值为 null。

2. runtime-core.esm-bundler.js?821d:36 [Vue warn]：当没有要关联的活动组件实例时调用 onMounted。生命周期注入 API 只能在 setup() 执行期间使用。如果您使用异步 setup()，请确保在第一个等待语句之前注册生命周期挂钩。

我有用 React 编写的自定义组件库（汇总构建）。我不想在外部项目中使用 createglobalstyle BCS 破坏性能。我添加了带有 font-face （相对路径）的 CSS 文件，但这些字体在外部项目中不起作用。你知道如何修复它吗？源代码

• 组件（文件夹）

• 索引.css 与

  @font-face { 字体系列：'font1'; 字体显示：交换；字体粗细：900；src: url(assets/fonts/font1/heavy/heavy.woff2) } h1{ 边距: 2.75rem 0 1.05rem; 字体系列：'font1'；字体粗细：400；行高：1.15；红色; }

Rollupconfig 插件：

[    postcss({
        extract: false,
        plugins: [autoprefixer]
    }),
    babel({
        exclude: 'node_modules/**'
    }),
    localResolve(),
    resolve({
        browser: true
    }),
    commonjs(),
    filesize(),
    copy({
        targets: [{ src: 'src/assets', dest: 'build' }]
    }),
    url({
        // by default, rollup-plugin-url will not handle font files
        include: ['**/*.woff', '**/*.woff2'],
        // setting infinite limit will ensure that the files 
        // are always …

我正在尝试部署我的 svelte 项目，但在 livereload 插件之外激活捆绑 javascript 时遇到问题。当我运行 rollup -c -w 时，代码显示正常，但使用其他服务器为应用程序提供服务不会激活 javacsript。它至少应该在 console.log 中记录一些内容，并希望添加 html，但它只显示一个空白页面。

rollup.config.js

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 replace from "@rollup/plugin-replace";
import { terser } from "rollup-plugin-terser";
import postcss from "rollup-plugin-postcss";
import babel from "rollup-plugin-babel";

export default {
  input: "src/main.js",
  output: {
    sourcemap: true,
    format: "iife",
    name: "app",
    file: "public/build/bundle.js"
  },
  plugins: [
    babel({
      exclude: "node_modules/**"
    }),
   
    svelte({
      // enable run-time checks when not in …