typescript+webpack+react.js

最新推荐文章于 2024-06-19 16:51:53 发布

学习笔记666

最新推荐文章于 2024-06-19 16:51:53 发布

阅读量1k

点赞数

CC 4.0 BY-SA版权

分类专栏： JavaScript魔鬼课程

本文链接：https://blog.youkuaiyun.com/github_26672553/article/details/75226047

JavaScript魔鬼课程专栏收录该内容

22 篇文章

订阅专栏

前面以后了解了 typescript+webpack：
http://blog.youkuaiyun.com/github_26672553/article/details/72899688

怎么吧React和Webpack结合？

官方文档也有介绍：
https://tslang.cn/docs/handbook/react-&-webpack.html

要学习React，就有必要学习JSX，官方文档地址：
https://tslang.cn/docs/handbook/jsx.html

另外在我们实际开发中肯定会遇到很多『坑』，需要我们查看编译选项：
https://tslang.cn/docs/handbook/compiler-options.html

1、typescript支持React，需要修改typescript配置文件tsconfig.json，在compilerOptions项中加上"jsx": "react"。
加上之后tsconfig.json内容如下：

{
  "compilerOptions": {
    "outDir": "./built",
    "allowJs": true,
    "target": "es5",
    "jsx": "react"
  },
  "include": [
    "./src/**/*"
  ]
}

2、现在我们添加React和React-DOM以及它们的声明文件到package.json文件里做为依赖：

npm install --save react react-dom @types/react @types/react-dom

接下来，我们要添加开发时依赖awesome-typescript-loader和source-map-loader。

npm install --save-dev typescript awesome-typescript-loader source-map-loader

3、安装之后，修改webpack配置文件webpack.config.js，添加loader、添加支持的文件扩展名等

{ test: /\.tsx?$/, loader: "awesome-typescript-loader" },

    resolve: {
        extensions: [".ts",".js",".tsx"]    // 自动补全，很重要
    },

React核心库不需要和业务代码打包在一起，给webpack配置文件添加：

    externals: {
        "react": "React",
        "react-dom": "ReactDOM"
    },

没有我不需要把React库打包，所以在最后使用的时候，我们可以手动引入，在html文件中：

<script src="https://unpkg.com/react@15/dist/react.js"></script>
<script src="https://unpkg.com/react-dom@15/dist/react-dom.js"></script>

到这里我们项目webpack.config.js文件内容如下：

module.exports = {
    entry: {
        "index":"./src/index.tsx" // 入口文件可以多个
    },
    output: {
        filename: "[name].js",  // 这里会自动生成index.js
        path:__dirname+"/built" // 输出到哪个文件夹
    },
    resolve: {
        extensions: [".ts",".js",".tsx"]    // 自动补全，很重要
    },
    module: {
        loaders: [
            { test: /\.ts$/, loader: "ts-loader" },   // 使用了ts-loader
            { test: /\.tsx?$/, loader: "awesome-typescript-loader" }
        ]
    },
    externals: {
        "react": "React",
        "react-dom": "ReactDOM"
    },
};

4、配置完成，编写业务代码测试一下。
新建User.tsx文件，代码如下：

import * as React from "react";


//可以定义一个接口
//来限制User类的属性
export interface UserInterface{
    userName:string,
    userSex:string
}

// 定义User类
export class User  extends React.Component<UserInterface,undefined>{
    render(){
        return <h1>我的名字是{this.props.userName}</h1>
    }
}

这是我们定义的一个React组件。(这个组件返回一个h1标签)

我们在入口文件index.tsx中使用：

// 引入react核心库
import * as React from "react";
import * as ReactDOM from "react-dom";

// 引入组件
import {User} from "./User"; //

// 渲染到模板页面
ReactDOM.render(
    <User userName="zhangSan" userSex="男 "/>,
    document.getElementById("example")
);

可以看到：我们给User组件传入了2个属性。

5、执行webpack编译命令，根据你的项目配置文件package.json来，我们这里是执行：

npm run wp

6、在html模板文件中预览。
index.html代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="example">

    </div>

    <script src="https://unpkg.com/react@15/dist/react.js"></script>
    <script src="https://unpkg.com/react-dom@15/dist/react-dom.js"></script>

    <!-- 引入编译之后的js文件 -->
    <script src="../built/index.js"></script>
</body>
</html>

这里写图片描述