У меня есть существующий проект, в который я хотел бы добавить поддержку TypeScript и React. Поскольку проект уже существует, я не могу использовать проект строительных лесов, и у меня возникли проблемы с правильной настройкой tsconfig.json.

У меня были различные проблемы в зависимости от того, какие настройки я использую, но обычно у меня возникают ошибки из-за другого кода в /node_modules/** и часто в /node_modules/@types/**. Я включил свой tsconfig.json с комментариями о том, какие ошибки исправляет каждый параметр.

Как я могу скомпилировать проект TypeScript + React без проблем с импортом / модулем?

Текущие релевантные tsconfig.json настройки

"module": "amd", // must be 'amd' or 'system' to use 'outFile'
"lib": ["es2015", "dom", "es5", "es6"], // must include some of these to suppress certain errors; adds the 'Set' type
"jsx": "react", // compile jsx to js
"sourceMap": true, // ensure debuggable
"outFile": "./static/js/app.js", // must be under /static/ to be served
"rootDir": "./static/ts",
"moduleResolution": "node", // suppresses issue with `default` or `export`
"esModuleInterop": true

Текущая ошибка

ReferenceError: define is not defined (в браузере)

1
twinlakes 24 Сен 2018 в 19:41

2 ответа

Лучший ответ

В итоге я использовал webpack (с модулем ts-loader) вместо tsc в качестве своего статического сборщика.

Единственное изменение, которое мне пришлось внести в свой машинописный текст, - это заменить import React from "react"; на import * as React from "react".

tsconfig.json (сокр.)

"target": "es5",
"module": "commonjs",
"lib": ["es5", "es6", "dom"],
"allowJs": true,
"jsx": "react",
"sourceMap": true,
"rootDir": "./client",
"downlevelIteration": true,

< Сильный > webpack.config.json

const path = require('path');

module.exports = {
    context: path.resolve(__dirname, 'client'),
    devtool: 'inline-source-map',
    entry: './main.tsx',
    mode: 'development',
    module: {
        rules: [{
            test: /\.tsx?$/,
            use: 'ts-loader',
            exclude: /node_modules/
        }]
    },
    output: {
        filename: 'client.js',
        path: path.resolve(__dirname, 'static/js')
    },
    resolve: {
        extensions: ['.tsx', '.ts', '.jsx', '.js']
    },
};
2
twinlakes 28 Сен 2018 в 04:38

Если вас пока устраивает один файл, то:

  1. Если вы еще этого не сделали, выполните эти инструкции по добавлению библиотеки React на вашу страницу. (Вы можете загрузить файлы JavaScript и разместить их на своем сервере, если хотите)
  2. Удалите операторы import из вашего файла, чтобы TypeScript не рассматривал его как модуль, а просто обращайтесь к глобальным переменным React и ReactDOM, которые будут определены во время выполнения JavaScript. файлы, добавленные на шаге 1. Пакет @types/react автоматически объявляет эти "UMD" глобальными переменные во время компиляции, когда ваш код не является модулем.
0
Matt McCutchen 27 Сен 2018 в 00:44