React + Typescript + Webpack 开发环境配置
2016-12-05 13:23
1126 查看
对于复杂或多人开发的
在组件头部定义
在编译中发现问题,减少运行时的报错;
可以在编辑器中实现实时类型校验、引用查询;
约束类型,在混合多语言环境中降低风险,等。
且配置也是非常简单,步骤如下。
至此,基本配置已经完成,后面创建好一个入口页面和
:smirk: :smirk: :smirk: 出来吧神龙
从配置文件中可以看出,里面无非就是
再执行以下命令试试:
这样会在项目文件中创建一个现成的
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 src="http://localhost:8080/webpack-dev-server.js"></script> </head> <body> <div id="app"></div> <script src="assets/app.bundle.js"></script> </body>
/* 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 dev
tslint
在开发中如果有个约束代码的工具能够让代码更加优雅,以前用的是eslint,如果用
.tsx就不能生效了,这里推荐使用
tslint:
npm i -g tslint cd my-project tslint --init
这样会在项目文件中创建一个现成的
tslint配置文件:
tslint.json,个性化方案可以自行设置。
相关文章推荐
- React+webpack 的开发环境配置步骤(二)
- webpack手动配置React开发环境的步骤
- React+webpack 的开发环境配置步骤(五)
- webpack 配置 react 开发环境
- Webpack+React+Typescript开发环境
- React+webpack 的开发环境配置步骤(三)
- 使用webpack、babel、react、antdesign配置单页面应用开发环境
- 配置React的Babel 6和Webpack 2环境
- React+Redux+Webpack构建开发单页应用环境
- 手把手教你webpack、react和node.js环境配置(上篇)
- 手把手教你webpack、react和node.js环境配置(上篇)
- React+webpack开发环境的搭建_0
- 手把手教你webpack、react和node.js环境配置(上篇)
- TypeScript+Webpack开发环境记录
- webpack配置开发环境(html-webpack-plugin、css-loader、less-loader、babel-loader)
- webpack入门+react环境配置
- 搭建Amazeui+react+webpack+webstorm开发环境
- webpack配置es6开发环境
- Webpack+Babel+React开发环境搭建
- react+webpack开发环境配置