标签: rollup

我正在尝试使用汇总 js 来构建我的打字稿项目，但我不知道如何生成定义文件以及如何将它们自动包含在 dist 文件中。

有谁知道怎么做？

这是我的 rollup.config.js

import typescript from "rollup-plugin-typescript";
import handlebars from "rollup-plugin-handlebars";
import babel from 'rollup-plugin-babel';

export default {
  entry: 'src/generator.ts',
  format: 'cjs',
  plugins: [
    typescript(),
    handlebars(),
    babel()
  ],
  dest: 'dist/bundle.js'
};

我正在使用默认的 ts 配置，但这与声明 = true 相同。

编辑 ：

还尝试使用 Webpack ：

    module.exports = {
      context: __dirname + '/src',
      entry: {
        index: './generator'
      },
      output: {
        path: __dirname + '/build',
        publicPath: '/',
        filename: 'generator.js'
      },
      resolve: {
        root: __dirname,
        extensions: ['', '.ts', '.js']
      },
      module: …

我有一个由多个文件夹组成的打字稿库。每个文件夹都包含一个 index.ts 文件，该文件导出一些业务逻辑。我正在尝试将其与 rollup 捆绑在一起以在调用站点上实现此行为：

import { Button, ButtonProps } from 'my-lib/button'
import { Input, Textarea } from 'my-lib/input'
import { Row, Column } from 'my-lib/grid'

这是目录结构：

我有一个主要内容index.ts，src/其中包含：

export * from './button';
export * from './input';
export * from './grid';

有了这种风格，我可以做到：

import { Button, Input, InputProps, Row, Column } from 'my-lib'

但我不想要这个。我想通过它们的命名空间访问每个模块。如果我从index.ts文件中删除导出，我所能做的就是：

import { Button } from 'my-lib/dist/button'

这是我以前没有看到的。添加dist/到导入语句意味着我通过相对路径访问模块。我要my-lib/Button。

我正在使用汇总。我尝试使用alias插件但没有用。以下是我的汇总配置：

const customResolver = resolve({
  extensions: ['ts'],
});

export …

如果，module1依赖于button-component@1.0.2

module2 依赖于button-component@1.5.0

最终捆绑包中加载了哪个版本的按钮组件？

我们可以采取哪些步骤来避免最终构建中的重复模块？

我们使用多个汇总插件将其输入解析为 AST。由于它们在相同的文件上运行，因此每个文件都会被解析多次。是否可以对此进行优化，以便每个文件仅解析一次？最小的例子：

// rollup.config.js\nimport {createFilter}\xc2\xa0from \'@rollup/pluginutils\';\nimport {simple} from \'acorn-walk\';\nimport {attachComments}\xc2\xa0from \'astravel\';\nimport {generate} from \'astring\';\n\nexport default {\n  input: \'src/main.js\',\n  output: {file: \'bundle.js\', format: \'cjs\'},\n  plugins: [{\n    name: \'plugin1\',\n    transform(code, id) {\n      const comments = [];\n      const ast = this.parse(code, {onComment: comments});\n      attachComments(ast, comments);\n      simple(ast, {\n        Identifier(n) {\n          // rewrite wrong to right\n          if (n.name === \'wrong\') n.name = \'right\';\n        }\n      });\n\n      return {\n        code: generate(ast, {comments: true}),\n        ast,\n        map: null /* minimal example, won\'t create a source map here */\n …

我正在尝试从我的组件创建一个库/包。

技术堆栈是：React、Typescript...以及一堆其他依赖项。

我正在使用 Rollup，当我尝试构建包时，出现以下错误：

[！] 错误：“DisplayHint”未由 ../node_modules/@bestowinc/enroll-sdk-core/build/lib/question-common.js 导出，由 ../src/utils/answerTypeConversions.ts https 导入： //rollupjs.org/guide/en/#error-name-is-not-exported-by-module

卷起：

import babel from 'rollup-plugin-babel';
import resolve from '@rollup/plugin-node-resolve';
import external from 'rollup-plugin-peer-deps-external';
import { terser } from 'rollup-plugin-terser';
import postcss from 'rollup-plugin-postcss';
import reactSvg from 'rollup-plugin-react-svg';
import typescript from 'rollup-plugin-typescript2';
import svg from 'rollup-plugin-svg';
import commonjs from '@rollup/plugin-commonjs';
import json from '@rollup/plugin-json';
import replace from '@rollup/plugin-replace';
import urlResolve from 'rollup-plugin-url-resolve';

export default [
  {
    input: './src/index.ts',
    output: [
      {
        file: './dist/index.js',
        format: 'cjs',
        sourcemap: true,
      },
      { …

我正在尝试使用 React.js 创建组件库，为此我使用 Rollup.js。当我构建应用程序时，我在控制台中看到此错误。看来 Rollup 无法检测默认导出，我尝试添加 .babelrc 文件配置，但不幸的是它不起作用。我做错了什么以及如何解决这个问题？

//rollup.config.js

import babel from 'rollup-plugin-babel';
import resolve from '@rollup/plugin-node-resolve';
import external from 'rollup-plugin-peer-deps-external';
import { terser } from 'rollup-plugin-terser';
import postcss from 'rollup-plugin-postcss';
import commonjs from '@rollup/plugin-commonjs';


export default [
    {
        input: './src/index.js',
        output: [
            {
                file: 'dist/index.js',
                format: 'cjs',
            },
            {
                file: 'dist/index.es.js',
                format: 'es',
                exports: 'named',
            }
        ],
        plugins: [
            postcss({
                plugins: [],
                minimize: true,
            }),
            babel({
                exclude: "node_modules/**",
                presets: ["@babel/preset-react"],
            }),
            external(),
            resolve(),
            terser(),
        ]
    }
];

//包.json

{ …

我正在开发一个项目，该项目有一个 React 组件库和一个导入所述库的 Next JS 应用程序。我读过很多关于 SO 的问题，并尝试了大多数解决方案，但均无济于事。

我们的组件库、字体等都可以正常工作，在故事书中看起来很棒

我们在 package.json 中导入了两种字体（在 devDependency 中）

"@fontsource/inter": "4.5.12",
"@fontsource/material-icons": "4.5.4",

材质图标字体已导入到我们的<Icon />组件中

import "@fontsource/material-icons";

并在 tailwind 配置中引用

module.exports = {
  content: ["./src/**/*.{js,jsx,ts,tsx,mdx}"],
  theme: {
    fontFamily: {
      sans: ["Inter", "ui-sans-serif", "sans-serif"],
      heading: ["Inter", "ui-sans-serif", "sans-serif"],
    },

这在故事书中没有问题

但是当导入到 Next JS 应用程序并使用相同的组件时

这些文件似乎在 Next JS 应用程序的 node_modules 文件夹中可用

这是汇总配置：

import resolve from "@rollup/plugin-node-resolve";
import commonjs from "@rollup/plugin-commonjs";
import typescript from "rollup-plugin-typescript2";
import postcss from "rollup-plugin-postcss";
import dts from "rollup-plugin-dts";
import json from …

我正在开发一个 svelte 项目，该项目又使用了 vite。但是，我需要配置多个输入和输出目录，对于一些非 svelte 相关的东西 \xe2\x80\x94 我想我也可以利用现有的捆绑器，而不是建立一个全新的项目。

我知道我可以指定构建路径作为每个输入键的一部分，但这似乎仅适用于 javascript 文件，并且我希望所有相关的捆绑文件都使用该路径。CSS 文件目前输出到 dist 根目录，这并不理想。我的 vite.config.js 的相关部分如下所示：

build: {\n    emptyOutDir: true,\n    rollupOptions: {\n        input: {\n            'svelte/bundle': './src/main.js',\n            'admin/bundle': './admin/index.js'\n        },\n        output: {\n            dir: '../../dist',\n            entryFileNames: '[name].js',\n            assetFileNames: '[name][extname]'\n        },\n    },\n},\nplugins: [svelte()]\n

我希望我的输出如下所示：

dist/\n\xe2\x94\x9c\xe2\x94\x80 svelte/\n\xe2\x94\x82  \xe2\x94\x9c\xe2\x94\x80 bundle.js\n\xe2\x94\x82  \xe2\x94\x94\xe2\x94\x80 styles.css\n\xe2\x94\x94\xe2\x94\x80 admin/\n   \xe2\x94\x9c\xe2\x94\x80 bundle.js\n   \xe2\x94\x94\xe2\x94\x80 styles.css\n

但我目前得到的是：

dist/\n\xe2\x94\x9c\xe2\x94\x80 svelte/\n\xe2\x94\x82  \xe2\x94\x94\xe2\x94\x80 bundle.js\n\xe2\x94\x9c\xe2\x94\x80 admin/\n\xe2\x94\x82  \xe2\x94\x94\xe2\x94\x80 bundle.js\n\xe2\x94\x9c\xe2\x94\x80 index.css\n\xe2\x94\x94\xe2\x94\x80 main.css\n

如何确保所有 CSS 文件也包含在各自的子目录中？

我想将多个 mdx 文件动态导入到 React 组件中，例如，我有一个页面根据所选语言需要不同的 mdx 文件，因此一次仅加载一个特定文件：

反应组件：

import { lazy } from 'react'
import { language } from 'currentLanguage'

const Content = lazy(() => import(`../assets/markdown/website/${language}/content.mdx`))

export const Page = () => (
  <div>
    <Content />
  </div>
)

Vite.config.js：

import mdx from '@mdx-js/rollup'
...
  plugins: [
    mdx(),
  ],
...

因此，这在开发中运行良好，但出现以下错误（但仍然有效）：

The above dynamic import cannot be analyzed by Vite.
See https://github.com/rollup/plugins/tree/master/packages/dynamic-import-vars#limitations for supported dynamic import formats. If this is intended to be left as-is, you can use the /* @vite-ignore …

我面临的问题尝试了很多事情，包括更改节点版本、删除 node_modules 和重新安装所有依赖项，但仍然没有找到任何解决方案。我需要帮助来解决这个问题。

我想创建一个库但卡在这里。

运行 rollup 命令时出错

  {
  "name": "typescript-template",
  "version": "0.1.0",
  "private": true,
  "main": "lib/cjs/index.js",
  "module": "lib/esm/index.js",
  "dependencies": {
    "@emotion/react": "^11.10.5",
    "@emotion/styled": "^11.10.5",
    "@mui/material": "^5.11.6",
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "@types/jest": "^27.5.2",
    "@types/node": "^16.18.11",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "storybook": "start-storybook -p 6006 -s public",
    "build-storybook": "build-storybook -s public",
    "build-rollup": "rollup --config",
    "build-tsc": "tsc"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ], …