Импорт JavaScript в приложение TypeScript с помощью Lerna - PullRequest
Новая
       10

Импорт JavaScript в приложение TypeScript с помощью Lerna

1 голос
/ 04 апреля 2020

Я пытаюсь создать монорепо с 2 пакетами React:

  • TypeScript (npx create-реагировать-app app - машинописный текст)
  • JavaScript (ui)

У меня есть базовая c lerna.json конфигурация 

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

В пакете ui я просто экспортирую одну кнопку (из src/Button.jsx) ): 

import React from 'react';

const Button = () => {
  return (
    <button>
      Start
    </button>
  )
}

export default Button;

Я загрузил app, чтобы использовать пакет ui. Импорт его внутри app вызывает следующую ошибку: 

Failed to compile
/lerna-demo/packages/ui/src/Button.jsx 5:4
Module parse failed: Unexpected token (5:4)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| const Button = () => {
|   return (
>     <button>
|       Start
|     </button>

Есть ли способ добавить загрузчик в lerna или app, чтобы исправить импорт?

EDIT

Структура проекта: 

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

Способ импорта компонента Button: 

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;

1 Ответ

1 голос
/ 07 апреля 2020

В вашем tsconfig.json, созданном CRA, вам нужно будет указать компилятору также включить pacakge пользовательского интерфейса, так что в вашем примере это что-то вроде этого: 

{
  "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",

и в базе tsconfig.json вы должны определить псевдоним к пути: главная tsconfig.json

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