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

Posted 2023-02-21

【中文标题】在 NPM 注册表中发布的 Typescript 模块 - 在不同项目中使用时找不到模块

【英文标题】：Typescript Module published in NPM Registry - Cannot find module when used in different project

【发布时间】：2021-06-29 15:01:18

【问题描述】：

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

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

我尝试了以下没有帮助

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

按照以下链接更新 TSConfig

以下链接没有帮助，因为我无法更改 "module": "esnext", --> to "CommonJS" 因为 CRA (Create-React-App) 不允许我这样做。 "moduleResolution": "node", "esModuleInterop": "true"

`Cannot find module` for my own TypeScript module

【参考方案1】：

等等！为什么我看到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-sass 或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 项目中！

【讨论】：

由于我在组件中使用@fluentui，因此无法汇总。还有其他方式吗？

是的，你可以使用webpack，但是，当涉及到构建lib时，我推荐rollup，所以我需要知道它有什么错误？