对于复杂或多人开发的 React 项目来说，管理和使用每个组件的 props 、 state 或许会成为一件让人头痛的事情，而为每一个组件写文档，成本也会比较大，对项目的开发效率也不是最理想的。
Typescript 给 React 带来很多好处：
- 在组件头部定义
interface，让每个人在拿到组件的第一时间就可以很明确知道该组件需要使用的props和state； - 在编译中发现问题，减少运行时的报错；
- 可以在编辑器中实现实时类型校验、引用查询；
- 约束类型，在混合多语言环境中降低风险，等。
且配置也是非常简单，步骤如下。
文件目录.
├── build # 前端配置文件
│ ├── index.html
│ └── webpack.config.js
├── app # 前端目录
├── .gitignore
├── package.json
├── tsconfig.json
└── tslint.json创建项目
mkdir my-project && cd my-project
npm init安装依赖
npm i -g webpack webpack-dev-server
npm i --save react react-dom @types/react @types/react-dom
npm i --save-dev ts-loader source-map-loader
npm link webpack webpack-dev-server typescript配置 webpack
/* build/webpack.config.js */
const config = {
entry: './app/index.tsx',
output: {
filename: 'app.bundle.js',
path: './public',
publicPath: '/assets'
},
devtool: 'source-map',
resolve: {
extensions: ['', '.webpack.js', '.web.js', '.ts', '.tsx', '.js']
},
module: {
loaders: [
{
test: /\.tsx?$/,
loader: 'ts-loader'
}
],
preLoaders: [
{
test: /\.js$/,
loader: 'source-map-loader'
}
]
},
devtool: 'eval'
}
module.exports = config配置 tsconfig
/* tsconfig.json */{
"compilerOptions": {
"outDir": "./public/",
"sourceMap": true,
"noImplicitAny": true,
"module": "commonjs",
"target": "es5",
"jsx": "react"
},
"files": [
"./app/index.tsx"
]
}至此，基本配置已经完成，后面创建好一个入口页面和entry文件就可以跑起来了：
/* build/index.html */<!doctype html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
<title>Hello world</title>
<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="http://localhost:8080/webpack-dev-server.js"></script>
</head>
<body>
<div id="app"></div>
<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="assets/app.bundle.js"></script>
</body>
</html>/* app/index.tsx */
import * as React from 'react'
import { render } from 'react-dom'
interface IAppProps {}
interface IAppState {}
class App extends React.Component<IAppProps, IAppState> {
public render(): JSX.Element {
return (
<div>
Hello world
</div>
)
}
}
render(<App />, document.getElementById('app'))启动项目
webpack-dev-server --inline --config build/webpack.config.js --content-base build --open:smirk: :smirk: :smirk: 出来吧神龙
简单的说明Webpack 配置
Webpack配置其实是一件很简单的事情，这也是他具备强大竞争力的重要因素。
从配置文件中可以看出，里面无非就是entry、output和loader，如果需要编译CSS，在loader里面加一个即可：
npm i --save-dev style-loader css-loader/* build/webpack.config.js */
const config = {
// ...
module: {
loaders: [
{
test: /\.css/,
loader: 'style-loader!css-loader'
}
],
// ...
},
// ...
}项目启动
项目启动的命令过长，放进 package.json 的 scripts 就好了：
/* package.json */{
"scripts": {
"dev": "webpack-dev-server --inline --config build/webpack.config.js --content-base build --open",
},
}再执行以下命令试试：
npm run devtslint
在开发中如果有个约束代码的工具能够让代码更加优雅，以前用的是 eslint，如果用 .tsx 就不能生效了，这里推荐使用 tslint ：
npm i -g tslint
cd my-project
tslint init这样会在项目文件中创建一个现成的 tslint 配置文件： tslint.json ，个性化方案可以自行设置。
原文webpack 新官网
webpack dev server
tsconfig.json 配置文档
style-loader
tslint
原文地址：React + Typescript + Webpack 开发环境配置
文章作者：Heleth
版权声明：自由转载-非商用-非衍生-保持署名（创意共享3.0许可证） 转载请注明出处
点击查看更多内容
3人点赞
评论
共同学习，写下你的评论
评论加载中...
作者其他优质文章
正在加载中
相关文章推荐
感谢您的支持，我会继续努力的～
扫码打赏，你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫，即可进行扫码打赏哦