使用Lerna将JavaScript导入TypeScript应用程序

我尝试创建一个包含2个React包的monorepo：

• 类型脚本（npx创建反应应用程序

  app

  --模板类型脚本）
• JavaScript（

  ui

  ）

我有一个基本的

lerna.json

配置

{
  "packages": ["packages/*"],
  "version": "1.0.0"
}

在

ui

包中，我只需导出一个按钮（从

src/Button.jsx

）：

是否有方法将加载程序添加到lerna或

app

以修复导入

编辑

项目结构：

lerna-demo/
  - node_modules/
  - lerna.json
  - package.json
  - packages/
    - app (created using create-react-app)
      - ...
    - ui
      - node_modules/
      - package.json
      - yarn.lock
      - src/
        - Button.jsx

导入按钮组件的方式：

import React from 'react';
import logo from './logo.svg';
import './App.css';
import * as Button from 'ui/src/Button';

const App: React.FC = () => {

  return (
    <div className="App">
      <Button />
    </div>
  );
}

export default App;

从“React”导入React；
从“/logo.svg”导入徽标；
导入“/App.css”；
从“ui/src/Button”导入*作为按钮；
常量应用程序：React.FC=（）=>{
返回(
);
}
导出默认应用程序；

在CRA创建的

tsconfig.json

中，您需要告诉编译器也包括ui包，因此在您的示例中类似于：

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react"
  },
  "include": [
    "src", "../ui/src",
  ]
}

另一种选择是扩展您的基本lerna

tsconfig.json

，我猜它已经指向您的包，路径是

path

——因此从您的CRA

tsconfig.json

中添加以下内容：

{
    "extends": "../../tsconfig.json",

在base

tsconfig.json

u中，应该为路径定义别名： main

tsconfig.json

{
    "compilerOptions": {
        "baseUrl": "./",
        "paths": {
            "ui/*": ["./packages/ui/*"],

---

编写更多代码-导入和error@Adidi我已经更新了question@Bartek我想检查一下：@NelsonYeung它起作用了：）我还必须在tsconfig中添加

“noImplicitAny”：false。jsonI的情况与问题中的情况完全相同。在基本tsconfig中添加
路径
，或在包tslint中添加路径都不起作用。我有时只能看到错误消息的更改。CRA的开发人员似乎不希望您能够做到这一点。将出现一条错误消息：
正在对tsconfig.json文件进行以下更改：-不得设置编译器选项.path（不支持别名导入）
我想人们也遇到过同样的问题，正在寻找解决方法。我还没有找到神奇的调整，但到目前为止，将回来。
{
    "extends": "../../tsconfig.json",

{
    "compilerOptions": {
        "baseUrl": "./",
        "paths": {
            "ui/*": ["./packages/ui/*"],