typescript+webpack+react.js

来源：互联网发布：网页快速抢购js脚本编辑：程序博客网时间：2024/05/22 04:40

前面以后了解了 typescript+webpack：
http://blog.csdn.net/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>

这里写图片描述

阅读全文

0 0