webpack+react新建项目—— 使用typescript

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

「已注销」

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

阅读量623

点赞数

本文链接：https://blog.csdn.net/weixin_54012475/article/details/122953081

版权

react 同时被 2 个专栏收录

9 篇文章 0 订阅

订阅专栏

webpack

4 篇文章 0 订阅

订阅专栏

本文档详细介绍了如何在webpack+react项目中引入typescript，包括安装typescript依赖、创建tsconfig.json配置文件、将js文件重命名为tsx以及修改webpack配置。通过这些步骤，将原本的javascript项目转型为typescript项目。

摘要由CSDN通过智能技术生成

文章目录

1，安装typescript相关依赖文件

npm install --save-dev typescript ts-loader @types/react @types/react-dom

2，创建tsconfig.json文件

在项目根目录下创建 tsconfig.json文件，先写几个简单的配置选项

{
  "compilerOptions": {
    "module": "es6",
    "target": "es5",
    "jsx": "react",
    "allowSyntheticDefaultImports": true
  }
}

3，重命名App.js和index.js文件并修改内容

App.js修改为App.tsx，并修改其内容

	import React from "react";
	
+	interface Props {
+	  title: string
+	}
	
+	class App extends React.Component<Props> {
	  render() {
	    const { title } = this.props;
	    return (
	      <h1>hello { title }</h1>
	    )
	  }
	}
	export default App;

index.js修改为index.tsx，暂不修改内容。

4，修改webpack.config.js内容

	const path = require("path");
	const HtmlWebpackPlugin = require("html-webpack-plugin");
	
	module.exports = {
	  mode: "development",
+	  entry: "./src/index.tsx",  // 修改引用文件后缀
	  output: {
	    path: path.resolve(__dirname, "dist"),
	    filename: "bundle.js"
	  },
	  //  引入模块时不带扩展,尝试按顺序解析这些后缀名
+	  resolve: {
+	    extensions: [".tsx", ".ts", ".js"]
+	  },
	  module: {
	    rules: [
	      {
	        test: /\.(js|jsx)/,
	        use: "babel-loader",
	        exclude: /node_modules/
	      },
	      //  将ts编译成js
+	      {
+	        test: /\.ts(x)?$/,
+	        loader: "ts-loader",
+	        exclude: /node_modules/
+	      }
	    ]
	  },
	  plugins: [
	    new HtmlWebpackPlugin({
	      template: "./public/index.html"
	    })
	  ],
	  devServer: {
	    open: true,
	  }
	};