美文网首页
webpack React中配置 TypeScript

webpack React中配置 TypeScript

作者: 梦想成真213 | 来源:发表于2019-08-02 15:30 被阅读0次

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

相关文章

网友评论

      本文标题:webpack React中配置 TypeScript

      本文链接:https://www.haomeiwen.com/subject/czzqdctx.html