[FE] tsx 引用 jsx

2018-08-03 本文已影响20人何幻

1. TypeScript + React 项目搭建

1.1 初始化工程目录

$ mkdir tsx-jsx && cd tsx-jsx && npm init --f

1.2 安装依赖

1.2.1 全局依赖

$ npm i -g webpack-cli

1.2.2 dependencies

$ npm i -S react react-dom @types/react @types/react-dom

1.2.3 devDependencies

$ npm i -D typescript awesome-typescript-loader babel-loader babel-core babel-preset-react babel-preset-es2015 babel-preset-stage-0

2. 文件结构

2.1 目录

tsx-jsx
├─ .babelrc
├─ index.html
├─ package.json
├─ src
│  ├─ components
│  │  ├─ jsx-comp
│  │  │  ├─ index.d.ts
│  │  │  └─ index.jsx
│  │  ├─ tsx-comp
│  │  │  └─ index.tsx
│  └─ index.tsx
├─ tsconfig.json
└─ webpack.config.js

2.2 配置文件

2.2.1 ./.babelrc

{
    "presets": [
        "es2015",
        "react",
        "stage-0"
    ]
}

2.2.2 ./tsconfig.json

{
    "compilerOptions": {
        "module": "es6",
        "target": "es5",
        "jsx": "react",
        "moduleResolution": "node"
    },
    "include": [
        "./src/**/*"
    ]
}

2.2.3 ./webpack.config.js

module.exports = {
    entry: "./src/index.tsx",
    output: {
        filename: "index.js",
        path: __dirname + "/dist"
    },
    resolve: {
        extensions: [".ts", ".tsx", ".js", "jsx"]
    },
    module: {
        rules: [
            { test: /\.tsx?$/, loader: "awesome-typescript-loader" },
            { test: /\.jsx?$/, loader: 'babel-loader' }
        ]
    },
};

2.3 代码文件

2.3.1 ./src/index.tsx

import * as React from "react";
import * as ReactDOM from "react-dom";

import { JsxComp } from './components/jsx-comp/index.jsx';
import TsxComp from './components/tsx-comp/index';

ReactDOM.render(
    <div>
        <JsxComp />
        <TsxComp />
    </div>,
    document.getElementById("page")
);

注：
（1）在引用.tsx文件的时候，不需要后缀名。而引用.jsx文件的时候，要加上后缀名。
（2）在.tsx中导入React需要使用import * as React from ...，不能使用import React from ...，
为compilerOptions增加allowSyntheticDefaultImports选项为true可以解决这个问题，
但是vs code还是会标红（重启vs code可解决）。

{
    "compilerOptions": {
        ...,
        "allowSyntheticDefaultImports": true
    },
    ...
}

（3）.jsx能识别.jsx和.tsx的默认导出，
.tsx能识别.tsx的默认导出，但是不能识别.jsx的默认导出。

ERROR in [at-loader] ./src/index.tsx:4:8
    TS1192: Module '"./tsx-jsx/src/components/jsx-comp/index"' has no default export.

2.3.2 ./src/components/tsx-comp/index.tsx

import * as React from 'react';

const TsxComp: React.StatelessComponent<{}> = () => <div>TsxComp</div>;

export default TsxComp;

2.3.3 ./src/components/jsx-comp/...

（1）./src/components/jsx-comp/index.jsx

import React from 'react';

const JsxComp = () => <div>JsxComp</div>;

export {
    JsxComp,
};

（2）./src/components/jsx-comp/index.d.ts

import * as React from 'react';

declare const JsxComp: React.StatelessComponent<{}>;

注：
为了能让TypeScript识别导入JavaScript模块中变量的类型，还要为模块添加.d.ts文件。

2.3.4 ./index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="page"></div>
    <script src="./dist/index.js"></script>    
</body>
</html>

3. 编译打包运行

3.1 编译打包

$ webpack

3.2 运行

$ open ./index.html

参考

React & Webpack
export = and import = require()
import fails with 'no default export'
Compiler Options