TypeScript 是一种由微软开发的编程语言。它是 JavaScript 的一个类型超集，包含独立的编译器。作为一种类型语言，TypeScript 可以在构建时发现 bug 和错误，这样程序运行时就可以避免此类错误。如下是 webpack、React 和 TypeScript 集成方式。
在使用第三方库的时候，要同时安装第三方库的类型声明文件，比如 React 库，就要安装 @types/react。
安装 TypeScript，打包项目文件
1.安装 TypeScript 后我们就可以使用 tsc 命令
npm install -g typescript
npm update -g typescript
2.安装成功之后查看 ts 版本：tsc -v
3.本地新建文件夹 webpack-react-typescript，安装 webpack，React 相关依赖，安装 TypeScript 编译器(compiler)和 处理 TypeScript 文件的 loader，安装第三方库的时候要一起安装第三方库的类型文件
npm init -y
npm install webpack webpack-cli --save-dev
npm install --save react react-dom
npm install --save-dev @types/react @types/react-dom
npm install --save-dev typescript ts-loader source-map-loader
4.配置 TypeScript 编译器，没有配置项，编译器提供不了任何帮助。npm 用户执行命令npx tsc --init，生成tsconfig.json 文件，或者手动新建 tsconfig.json，输入如下配置项：
//tsconfig.json
{
"compilerOptions": {
"outDir": "./dist/",
"sourceMap": true,
"noImplicitAny": true,
"module": "es6",
"target": "es5",
"jsx": "react",
"allowJs": true
},
"include": ["src"],
"exclude": ["node_modules", "dist"]
}
5.在根目录下新建 src/components/Hello.tsx，src/index.tsx，源文件扩展名可以是 ts 文件，还可以是含有 jsx 语法的 tsx 文件
//src/components/Hello.tsx
import * as React from "react";
export interface HelloProps { compiler: string; framework: string; }
export const Hello = (props: HelloProps) => <h1>Hello from {props.compiler} and {props.framework}!</h1>;
//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("app")
);
6.根目录下新建 index.html
//index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
</head>
<body>
<div id="app"></div>
<!-- Dependencies -->
<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/main.js"></script>
</body>
</html>
7.新建webpack配置文件 webpack.config.js
//webpack.config.js
const path = require('path')
module.exports = {
mode: 'development',
devtool: 'source-map',
entry: {
main: './src/index.tsx'
},
output:{
filename: '[name].js',
path: path.resolve(__dirname, 'dist')
},
resolve: {
extensions: ['.ts', '.tsx', '.js']
},
module: {
rules: [
{
test: /\.tsx?$/,
use: 'ts-loader',
exclude: /node_modules/
}
]
},
externals: {
'react': 'React',
'react-dom': 'ReactDOM'
}
}
8.最后打包 webpack
E:\workCode\webpack-react-typescript>webpack
Hash: 429f98c0d81c6dd61331
Version: webpack 4.39.0
Time: 1583ms
Built at: 2019-08-02 14:10:47
Asset Size Chunks Chunk Names
main.js 6.01 KiB main [emitted] main
main.js.map 4.54 KiB main [emitted] main
Entrypoint main = main.js main.js.map
[./src/index.tsx] 244 bytes {main} [built]
[react] external "React" 42 bytes {main} [built]
[react-dom] external "ReactDOM" 42 bytes {main} [built]
+ 1 hidden module
9.浏览器中直接打开 index.html 可以看到页面出现 Hello from TypeScript and React!。
参考
http://www.typescriptlang.org/docs/handbook/react-&-webpack.html
https://www.webpackjs.com/guides/typescript/
https://react.docschina.org/docs/static-type-checking.html
网友评论