TypeScript学习笔记（三）Webpack

最新推荐文章于 2024-02-07 17:52:33 发布

翎羽飘

最新推荐文章于 2024-02-07 17:52:33 发布

阅读量485

点赞数

文章标签： TypeScript

本文链接：https://blog.csdn.net/u014032819/article/details/77659323

版权

照着教程配完报了个奇怪的错误，哪位大神帮忙看一下

1.创建项目：

mkdir proj
cd proj

mkdir src

mkdir dist

mkdir components

2.初始化程序：

npm init

3.安装依赖ts-loader和source-map-loader。

npm install -g typescript webpack

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

4. 安裝

npm install --save-dev ts-loader source-map-loader
npm link typescript

5.在根目录下添加tsconfig.json文件

{
	"compilerOptions": {
		"outDir": "./dist/",
		"sourceMap": true,
		"noImplicitAny": true,
		"module": "commonjs",
		"target": "es5",
		"jsx": "react"
	},
	"files": [
		"./src/components/Hello.tsx",
		"./src/index.tsx"
	]
}

6.写代码，在src/components目录下创建名为Hello.tsx的文件

import * as React from "react";
export interface HelloProps { compiler: string; framework: string; }
export class Hello extends React.Component<HelloProps, {}> {
	render() {
		return <h1>Hello from {this.props.compiler} and {this.props.framework}!</h1>;
	}
}

7.在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("example")
);

8.在proj根目录创建index.html

<!DOCTYPE html>
<html>

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

	<body>
		<div id="example"></div>
		<!-- Dependencies -->
		<script src="./node_modules/react/dist/react.js"></script>
		<script src="./node_modules/react-dom/dist/react-dom.js"></script>
		<!-- Main -->
		<script src="./dist/bundle.js"></script>
	</body>

</html>

9.创建webpack配置文件

1）在工程根目录创建webpack.config.js

module.exports = {
	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: ["", ".webpack.js", ".web.js", ".ts", ".tsx", ".js"]
	},
	module: {
		loaders: [
			// All files with a '.ts' or '.tsx' extension will be handled by 'ts-loader'.
			{
				test: /\.tsx?$/,
				loader: "ts-loader"
			}
		],
		preLoaders: [
			// All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'.
			{
				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"
	},
};

2）执行webpack

3）在浏览器打开index.html