TypeScript、React、webpack 一起使用

最新推荐文章于 2023-12-24 22:47:34 发布

大溪流

最新推荐文章于 2023-12-24 22:47:34 发布

阅读量410

点赞数 1

本文链接：https://blog.csdn.net/qq_32719215/article/details/96451322

版权

前端同时被 3 个专栏收录

15 篇文章 0 订阅

订阅专栏

typescript

8 篇文章 0 订阅

订阅专栏

react

8 篇文章 0 订阅

订阅专栏

1.npm 项目初始化项目

npm init

项目中会生成package.json文件，这里可以使用默认值

2.全局安装webpack

npm install -g webpack

项目中使用webpack管理前端的js、css、ts进行绑定

3.安装react reactDOM 及其声明文件到项目的package.json文件中

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

@types/ 前缀表示我们额外要获取React和React-DOM的声明文件

项目使用的时react前端框架

4.添加开发时【–save-dev/–save==> devdependence】依赖awesome-typescript-loader和source-map-loader

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

awesome-typescript-
loader可以让Webpack使用TypeScript的标准配置文件 tsconfig.json 编译
TypeScript代码。 source-map-loader使用TypeScript输出的sourcemap文件来告诉
webpack何时生成自己的sourcemaps。

使webpack 使用typescript的tsconfig.json配置文件的配置进行编译ts文件。

5.系统使用的webpack的配置文件【进行绑定组件】

webpack.config.js

const ENV = 'development';

module.exports = {
    mode: ENV,
    entry: "./src/index.tsx",
    output: {
        filename: "bundle.js",
        path: __dirname + "/dist"
    },
    // Enable sourcemaps for debugging webpack's output.
    devtool: "source-map",
    resolve: {
        // Add '.ts' and '.tsx' as resolvable extensions.
        extensions: [".ts", ".tsx", ".js", ".json"]
    },
    module: {
        rules: [
            // All files with a '.ts' or '.tsx' extension will be handled by 'awesome-typescript-loader'.
            {
                test: /\.tsx?$/, loader: "awesome-typescript-loader"
            },
            // All output '.js' files will have any sourcemaps re - processed by 'source-map-loader'.
            {
                enforce: "pre", test: /\.js$/, loader: "source-map-loader"
            }
        ]
    },
    // When importing a module whose path matches one of the following, just
    // assume a corresponding global variable exists and use that instead.
    // This is important because it allows us to avoid bundling all of our
    // dependencies, which allows browsers to cache those libraries between builds.
    externals: {
        "react": "React",
        "react-dom": "ReactDOM"
    }
};

6.编写react显示业务代码

组件hello.tsx

import * as React from "react"

export interface HelloProps {
    compiler: string;
    framework: string;
}

// export const Hello = (props: HelloProps) => 
// <h1>Hello from {HelloProps.compiler} and {HelloProps.framework} !</h1>

export class Hello extends React.Component<HelloProps,{}> {

    render(){
        return <h1>Hello from {this.props.compiler} and {this.props.framework}</h1>
    }

引用hello组件的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("example")
);

显示组件的html页面

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>Hello React!</title>
</head>

<body>
    <div id="example">13213</div>
    <!-- Dependencies -->

    <!-- <script src="../node_modules/react/umd/react.development.js"></script> -->
    <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/bundle.js"></script>
</body>

</html>