时间戳

首页 > 解决方案 > 如何为浏览器编译打字稿

reactjs - 如何为浏览器编译打字稿

问题描述

我有一个想要添加 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（在浏览器中）

标签： reactjstypescript

解决方案

我最终使用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.js

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']
    },
};

推荐阅读