webpack React中配置 TypeScript

TypeScript 是一种由微软开发的编程语言。它是 JavaScript 的一个类型超集，包含独立的编译器。作为一种类型语言，TypeScript 可以在构建时发现 bug 和错误，这样程序运行时就可以避免此类错误。如下是 webpack、React 和 TypeScript 集成方式。

在使用第三方库的时候，要同时安装第三方库的类型声明文件，比如 React 库，就要安装 @types/react。

安装 TypeScript，打包项目文件

1.安装 TypeScript 后我们就可以使用 tsc 命令

npm install -g typescript 
npm update -g typescript

2.安装成功之后查看 ts 版本：tsc -v

3.本地新建文件夹 webpack-react-typescript，安装 webpack，React 相关依赖，安装 TypeScript 编译器(compiler)和处理 TypeScript 文件的 loader，安装第三方库的时候要一起安装第三方库的类型文件

npm init -y
npm install webpack webpack-cli --save-dev
npm install --save react react-dom
npm install --save-dev @types/react @types/react-dom
npm install --save-dev typescript ts-loader source-map-loader

4.配置 TypeScript 编译器，没有配置项，编译器提供不了任何帮助。npm 用户执行命令npx tsc --init，生成tsconfig.json 文件，或者手动新建 tsconfig.json，输入如下配置项：

//tsconfig.json
{
    "compilerOptions": {
        "outDir": "./dist/",
        "sourceMap": true,
        "noImplicitAny": true,
        "module": "es6",
        "target": "es5",
        "jsx": "react",
        "allowJs": true
    },
    "include": ["src"],
    "exclude": ["node_modules", "dist"]
}

5.在根目录下新建 src/components/Hello.tsx，src/index.tsx，源文件扩展名可以是 ts 文件，还可以是含有 jsx 语法的 tsx 文件

//src/components/Hello.tsx
import * as React from "react";
export interface HelloProps { compiler: string; framework: string; }
export const Hello = (props: HelloProps) => <h1>Hello from {props.compiler} and {props.framework}!</h1>;

//src/index.tsx
import * as React from "react";
import * as ReactDOM from "react-dom";
import { Hello } from "./components/Hello";
ReactDOM.render(
    <Hello compiler="TypeScript" framework="React" />,
    document.getElementById("app")
);

6.根目录下新建 index.html

//index.html
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>Hello React!</title>
    </head>
    <body>
        <div id="app"></div>

        <!-- Dependencies -->
        <script src="./node_modules/react/umd/react.development.js"></script>
        <script src="./node_modules/react-dom/umd/react-dom.development.js"></script>
        
        <!-- Main -->
        <script src="./dist/main.js"></script>
    </body>
</html>

7.新建webpack配置文件 webpack.config.js

//webpack.config.js
const path = require('path')

module.exports = {
    mode: 'development',
    devtool: 'source-map',
    entry: {
        main: './src/index.tsx'
    },
    output:{
        filename: '[name].js',
        path: path.resolve(__dirname, 'dist')
    },
    resolve: {
        extensions: ['.ts', '.tsx', '.js']
    },
    module: {
        rules: [
            {
                test: /\.tsx?$/,
                use: 'ts-loader',
                exclude: /node_modules/
            }
        ]
    },
    externals: {
        'react': 'React',
        'react-dom': 'ReactDOM'
    }
}

8.最后打包 webpack

E:\workCode\webpack-react-typescript>webpack
Hash: 429f98c0d81c6dd61331
Version: webpack 4.39.0
Time: 1583ms
Built at: 2019-08-02 14:10:47
      Asset      Size  Chunks             Chunk Names
    main.js  6.01 KiB    main  [emitted]  main
main.js.map  4.54 KiB    main  [emitted]  main
Entrypoint main = main.js main.js.map
[./src/index.tsx] 244 bytes {main} [built]
[react] external "React" 42 bytes {main} [built]
[react-dom] external "ReactDOM" 42 bytes {main} [built]
    + 1 hidden module

9.浏览器中直接打开 index.html 可以看到页面出现 Hello from TypeScript and React!。

参考
http://www.typescriptlang.org/docs/handbook/react-&-webpack.html
https://www.webpackjs.com/guides/typescript/
https://react.docschina.org/docs/static-type-checking.html

最后编辑于：2019.08.05 10:36:21