---¶
统计信息：字数 7119 阅读15分钟
layout: post title: "TypeScript React Webpack Combination" subtitle: "Use TS React Webpack together" date: 2018-10-09 22:00:00 author: "ZeFeng" header-img: "img/TS.jpg" header-mask: 0.3 catalog: true tags: - TypeScript - React - Webpack
前言¶
这篇文章我们主要讲解如何使用TS与已经使用React以及webpack的项目结合使用。
正文¶
初始化项目结构¶
首先我们新建一个名字为myTsProj的文件夹，命令如下：
mkdir myTsProj
cd myTsProj
接下来创建src文件夹，用来放TS文件。然后在src文件夹里面创建components文件夹，用来放我们自己自定义的组件。
mkdir src
cd src
mkdir components
cd ..
Webpack会帮助我们生成dist目录。经webpack处理，会生成bundle.js文件放在dist目录下。 最后看到的文件如下：
proj/
├─dist/
└─ src/
└─components/
初始化工程¶
安装,使用默认值就可以了。也可以在生成的 package.json文件里修改。
npm init
安装依赖¶
1、要确保我们有安装webpack,如果没有安装，执行下面的命令：
npm install -g webpack
2、接着添加React和React-DOM以及它们的声明文件到package.json文件里做为依赖，执行下面命令：
npm install --save react react-dom @types/react @types/react-dom
npm install --save-dev typescript awesome-typescript-loader source-map-loader
添加TypeScript配置文件¶
我们想将我们写的源码和必要的TypeScript文件整合到一起，这就需要创建一个tsconfig.json文件。（包含了输入文件列表以及编译选项） 在myTsProj的根目录下新建 tsconfig.json文件，里面配置如下：
{
"compilerOptions":{
"outDir": "./dist/",
"sourceMap": true,
"noImplicitAny": true,
"module": "commonjs",
"target": "es5",
"jsx": "react"
},
"include": [
"./src/**/*"
]
}
编写代码¶
首先在 src/components目录下创建一个Demo.tsx的文件，代码如下：
import * as React from "react";
export interface DemoProps { compiler: string; framework: string;}
export const Demo = (props: DemoProps) => <h1>Hello from {props.compiler} and {props.framework}!</h1>;
import * as React from "react";
export interface DemoProps { compiler: string; framework: string;}
// 'DemoProps ' describes the shape of props.
// State is never set so we use the '{}' type.
export class Demo extends React.Component<DemoProps , {}> {
render() {
<h1>Hello from {props.compiler} and {props.framework}!</h1>;
}
}
import * as React from "react";
import * as ReactDOM from "react-dom";
import { Demo } from "./components/Demo";
ReactDOM.render(
<Demo compiler="TypeScript" framework="React" />,
document.getElementById("app")
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>React TS Demo!</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/bundle.js"></script>
</body>
</html>
创建webpack配置文件¶
做到这里，我们还差最后一步。 在myTsProj根目录下创建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: [".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"
},
};
webpack允许我们使用通过这种方式写的代码库。 通过我们的设置 "react": "React"，webpack会神奇地将所有对"react"的导入转换成从React全局变量中加载。
运行¶
最后我们只需要执行一个命令：
webpack
相信大家对TS已经有一定了解了，可以到官网深入学习TS了。官网链接
Reward
