网站搜索

reactjs - 在 Rollup/Typescript/React 中编译代码时出现冲突问题

我在八月份找到了工作,更重要的是,在这场疫情期间,我实际上也保住了这份工作!!

作为一个副项目,我想学习创建一个 React 组件库供自己使用(远未完成),并使用 Rollup 进行树摇优化 + 插件用于 cjs、udm 等以提高兼容性。

当我使用 TSC 编译时,它几乎完美了,现在我已经调整了一些关于组织结构和单独的构建 TSConfig 的事情。

我的 TSConfig

我的构建 TSConfig

我的 Rollup 配置

我不确定是否有人一眼就能看到有什么明显的问题,我在这里那里稍微调整了一下,试图让 rollup 首先运行起来,但显然它没有正确解析,否则我就不会在这里了!:D

附注:尽管在根目录设置了一个 custom.d.ts 来声明使用 svgr 的 SVG 导入,TS 仍然无法理解该声明并抛出类型错误:

declare module '*.svg' { import React = require('react') export

阅读更多 →

在使用 Rollup 的 TypeScript 插件与 Babel 时,Babel 无法编译

我无法让 @rollup/plugin-typescript 与 @rollup/plugin-babel 一起工作,而且从 TS 代码生成的 JS 没有被 Babel 转译

我寻找了相关问题的解决方案,但它们似乎不起作用(在与 TypeScript 插件一起使用 Rollup 时 Babel 7 没有进行转译)

以下是我的 rollup 配置

import { terser } from "rollup-plugin-terser"; import pluginTyp

阅读更多 →

使用 Rollup 从本地 Yarn 工作区打包 TypeScript 类型

我有一个单仓库,作为 Yarn 工作区创建,其中包含一个 API 和一个 SDK。

API 是后端,而 SDK 是用来与该后端交互的便捷库。API 是一个私有包,而 SDK 将会被发布并对任何人可用。两者都是用 TypeScript 编写的。

自然,当涉及 TypeScript 类型时,SDK 和 API 之间有一些重叠。由于 API 定义了它在其端点中接受的参数,似乎最好在 SDK 中重用这些类型来定义 SDK 需要“发送”给 API 的内容。

我显然可以从 API 导出这些类型,并在 SDK 中导入它们:

// api/src/index.ts export type EndpointArgumentType = { resourceId: string body: Record<string, unknown> } // sdk/src/index.ts import { EndpointArgumentType } from 'api'

阅读更多 →

typescript - 当 rollup 无法解析依赖时如何修复错误

我正在用 React 创建一个可插拔的小部件,用于 Mendix 应用程序,该小部件使用 ketcher-react 包。

只要基本设置到位(见下方代码),当我想使用 npm run build 构建时,我会收到以下错误:

错误:'url' 被 url?commonjs-external 导入,但无法解析 – 将其视为外部依赖

仅供参考:url?commonjs-external 在 @rollup\plugin-commonjs 的 index.js 文件中使用

希望有人能帮帮我!

这是我的功能组件(没什么特别的,只是 ketcher 建议的配置):

import { ReactElement, createElement } from "react"; import { StandaloneStructServiceProvider } from 'ketcher-standalone'; im

阅读更多 →

reactjs - @rollup/plugin-typescript TS2307:找不到模块

我正在按照这个指南为我的公司制作一个 React 组件库。我按照指南设置了一切,然后尝试运行 npm rollup -c。它在我的机器上可以正常工作(构建没有错误)。

但是当我尝试将它连接到 CircleCI(我们用于构建的工具)时,它抛出了这个错误:

配置都是一样的,服务器使用的是 Linux,节点版本也一样。我是不是遗漏了什么?或者有什么我可以测试的?

阅读更多 →

typescript - 使用 rollup 将 react-table 库的类型添加到构建中

我希望能够在构建过程中使用 rollup 模块打包器包含 react-table 的类型定义,这样使用我的自定义库的外部应用程序就不必在他们的应用程序中包含这些类型定义。现在它不会在捆绑包中包含外部库的类型定义。我尝试过使用 rollup-plugin-copy 将特定的类型定义文件复制到目标位置,但想知道是否有更好的方法来实现这一点。

这是我的 tsconfig.json 文件

{ "compilerOptions": { "rootDirs": ["src/components", "src/widgets", "src/utils"], "target": "es5", "lib": ["dom", "dom.iterable", "esnext&quo

阅读更多 →

reactjs - React 微捆绑包 (Rollup) 自定义开发服务器配置的 Cypress 组件测试

我正在尝试为我们正在开发的新 React 仓库建立一个组件测试策略。

根据 Cypress 文档,没有关于如何使用像这样的自定义开发服务器配置组件测试的有用细节。

import { defineConfig } from 'cypress' export default defineConfig({ component: { devServer(cypressConfig) { // return dev server instance or a promise that resolves to // a dev server instance here }, }, })

我的 package.json 看起来像这样:

"source": "src/index.ts", "exports": { "require": "./di

阅读更多 →

从 Svelte 组件使用 Rollup 包含 Typescript 文件显示解析错误

简要背景

  • 我想制作一个具有网页视图的 Visual Studio Code 扩展
  • 我想用 Svelte/Typescript 来制作网页视图,用 Typescript 来制作扩展本身
  • 这导致我采用了一个不寻常的项目结构,我使用 esbuild 来构建扩展,使用 rollup 来构建 webviews,并且为 webviews 使用与扩展不同的 tsconfig.json

怎么了?

在尝试进行 webview 汇总构建时,我不断收到解析错误:

src/webviews/pages/LogViewerPage.ts → out/compiled/LogViewerPage.js... [!] Error: Unexpected token (Note that you need plugins to import files that are n

阅读更多 →

javascript - 在 TypeScript 项目中使用 rollup 时出现错误 TS2307:找不到模块

在使用 rollupjs 生成捆绑包并运行 npx tsc lib/index.d.ts 检查结果后,我收到了以下错误:

error TS2307: Cannot find module '@solana/web3.js' or its corresponding type declarations. import {PublicKey} from '@solana/web3.js';

我的代码示例非常简单,只是导入一个公钥:

// src/index.ts import {PublicKey} from '@solana/web3.js'; const a = new PublicKey("SOME_KEY");

这是我当前的rollup.config.js配置:

import alias from '@rollup/plugin-alias'; impo

阅读更多 →

javascript - Lodash 在 Rollup 包中占用的大小是两倍

我正在开发一个 TypeScript React 库,以便在我另一个项目中使用。这个库是用 Rollup 打包的。我注意到我的打包文件相当大,所以我使用了 rollup-plugin-visualizer 来帮助我查看哪些部分占用了所有空间。有一件事让我觉得奇怪,那就是 Lodash 占用的空间达到了原本应有的 2 倍(142KB,而不是 69.9KB)。

我已经检查了我的 tsconfig.json 和 rollup.config.js,但找不到原因……也许有人知道为什么会发生这种情况?我知道我可以使用像 Terser 这样的压缩工具来减小打包文件的大小,但我主要想了解为什么一开始会发生这种情况。

一些注意事项:

  • 在我的项目中,我只导入我需要的 lodash 模块(import map from 'lodash/map';)以获得最小的包大小,但不幸的是,我的其中一个依赖(一个第三方交互式图表库)导入了整个库。
  • 我也运行了 npm ls lodash 并确认 lod

    阅读更多 →