时间戳

首页 > 解决方案 > 在 NPM 注册表中发布的 Typescript 模块 - 在不同项目中使用时找不到模块

reactjs - 在 NPM 注册表中发布的 Typescript 模块 - 在不同项目中使用时找不到模块

问题描述

我使用 CRA (Create-React-App) - typescript 创建了一个模块并将其发布到 npm。我的目标是将模块添加为另一个 CRA 创建的打字稿项目中的组件。当我尝试导入模块时，它失败并出现以下错误。

找不到模块：'fbdemots'。确保已安装此软件包。我确实在路径“node_modules\fbdemots”中看到了这些模块。

我尝试了以下没有帮助

  1. 在模块和使用模块的项目中创建声明文件（d.ts）

  2. 如下链接中所述更新 TSConfig

  3. 下面的链接没有帮助，因为我无法将“模块”：“esnext”，--> 更改为“ CommonJS ”，因为 CRA（Create-React-App）不允许我这样做。“moduleResolution”：“节点”，“esModuleInterop”：“真”

我自己的 TypeScript 模块的“找不到模块”

标签： reactjstypescript

解决方案

等待！为什么我看到node_modules的fbdemots是一个项目，不是组件，根本无法导出

如果你想发布一个组件，你可以按照这些常用的步骤，当然还有其他的方法你可以尝试。

如果你不想使用 rollup/webpack 或者觉得有点复杂，你可以直接导出你的普通组件，然后发布它。

1.创建组件并导出

// index.tsx

import React from 'react'

const Test = (props: {a: string})=> <div>{props.a}</div>

export default Test

2. 使用 rollup 或 Webpack 构建它以确保它可用于 JS 模块

安装一些必要的模块

yarn add --dev rollup rollup-plugin-typescript2

然后在根目录下创建 rollup.config.js 文件，如果还有其他文件，比如 ' .css'、'. scss'，那么你应该安装并添加一些插件，比如rollup-plugin-sassor rollup-plugin-css-only...

// rollup.config.js

import typescript from 'rollup-plugin-typescript2';
// import sass from 'rollup-plugin-sass';

export default {
  input: 'index.tsx', // the path of your source file
  output: [
    {
      dir: 'lib',
      format: 'cjs',
      exports: 'named',
      sourcemap: false,
      strict: false,
    },
  ],
  plugins: [typescript()],
  // plugins: [sass({ insert: true }), typescript()],
  external: ['react', 'react-dom'],
};

3.创建库

使用 rollup 命令构建

npx rollup -c

然后准备package.json, LICENSE, README.md... 到 lib 目录下，最后就可以发布了

npm publish ./lib --access public

最后，您可以将其作为组件添加到另一个 CRA 创建的 typescript 项目中！

推荐阅读