前端之家收集整理的这篇文章主要介绍了
从零构建一个react+webpack+typescript的应用，
前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。
今天要完成在windows下从零开始构建一个react应用的任务
首先，新建一个文件夹，然后在该文件夹下使用命令npm init 初始化一个node项目。
然后安装所需依赖，
@H_
301_7@
1 npm i react react-dom mobx @types/react @types/react-dom --
save
2 npm i webpack webpack-dev-server typescript ts-loader source-map-loader --save-dev
然后在根目录下新建文件夹src,config，新建文件index.html，tsconfig.json
在config目录下新建文件webpack.config.dev.js
添加tsconfig.json配置文件内容：
@H_
301_7@
{
"compilerOptions"
: {
"allowJs":
true,"allowUnreachableCode":
true,"outDir": "./public/"
,"sourceMap":
true,"noImplicitAny":
true,"module": "commonjs"
,"target": "es5"
,"jsx": "react"
,"emitDecorator
Metadata":
true,"experimentalDecorators":
true,"removeComments":
true
},"include"
: [
"./src/**/*"
]
}
添加webpack.config.dev.js内容：
@H_
301_7@const config =
{
entry: './src/index.tsx'
,output: { filename: 'bundle.js',path: '/public',publicPath: '/public'
},devtool: 'eval'
,resolve: { extensions: ['.webpack.js','.web.js','.ts','.tsx','.js'
] },module: {
loaders: [{ test: /\.tsx?$/,loader: 'ts-loader'
}]
},devServer: {
contentBase: "./",
//本地服务器所加载的页面所在的目录
historyApiFallback:
true,
//不跳转
inline:
true,
//实时刷新
}
}
module.exports = config
然后添加index.html内容：
@H_
301_7@
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<Meta charset="UTF-8">
<Meta name="viewport" content="width=device-width,initial-scale=1">
</head>
<body>
<div id="app">
</div>
</body>
<script src="./public/bundle.js"></script>
</html>
在inedx.html中引入的./public/bundle.js即webpack配置文件中output项最终生成的文件。
关于webpack的配置，可以参阅webpack文档： http://www.css88.com/doc/webpack2/concepts/output/
关于tsconfig.json的配置，可以参阅文档：http://www.typescriptlang.org/docs/handbook/tsconfig-json.html，或者直接查看它的中文翻译版：https://www.w3cschool.cn/typescript/typescript-tsconfig-json.html
在进行完以上步骤之后其实整个webpack和typescript的搭建已经完成了。现在，在package.json中的scripts中添加
"start": "webpack-dev-server --config config/webpack.config.dev.js"
然后在命令行内运行 npm start 命令，已经可以运行，但是还是会报错入口文件不存在。
在webpack中，我们设置了入口文件为./src/index.tsx，那么我们就去该目录下创建该文件，然后在里面添加内容：
@H_
301_7@import * as React from 'react'
import { render } from 'react-dom'
import {observer,Provider,inject } from 'mobx-react'
class Text extends React.Component {
constructor(props: any) {
super(props)
}
render() {
return (
<div>
123333
</div>
)
}
}
render(<Provider ><Text /></Provider>,document.getElementById('app'))
然后再重新npm start开启node服务，访问localhost:8080端口，可以看到页面上成功输出了123333，证明我们的typescript+webpack+react的搭建已经基本完成。
