React + Typescript + Webpack 开发环境配置
对于复杂或多人开发的 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>
</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
出来吧神龙
简单的说明
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
,个性化方案可以自行设置。
参考
webpack 新官网
webpack dev server
tsconfig.json 配置文档
style-loader
tslint
原文
原文地址:React + Typescript + Webpack 开发环境配置
文章作者:Heleth
版权声明:自由转载-非商用-非衍生-保持署名(创意共享3.0许可证) 转载请注明出处
React + Typescript + Webpack 开发环境配置相关推荐
- 使用create-react-app搭建TypeScript+React+Ant Design开发环境
一.使用create-react-app创建一个支持TypeScript+React的开发环境: 要创建一个支持TypeScript的Create React App项目,可以运行: npx crea ...
- React多页面应用5(webpack生产环境配置,包括压缩js代码,图片转码等)
本教程总共7篇,每日更新一篇,请关注我们!你可以进入历史消息查看以往文章,也敬请期待我们的新文章! 1.React多页面应用1(webpack开发环境搭建,包括Babel.热更新等) ----2017 ...
- vue如何配置服务器端跨域_vue开发环境配置跨域,一步到位
本文要实现的是:使用vue-cli搭建的项目在开发时配置跨域,上线后不做任何任何修改,接口也可以访问 阅读时间需要三分钟 production:产品 生产环境 development:开发 开发环境 ...
- weexapp 开发流程(一)开发环境配置
1.创建项目 weexpack create weexapp 2.安装必要插件 npm i jwt-simple vue-resource vue-router vuex vuex-router-sy ...
- atom配置python环境_用Python制作网站Django实操与开发环境配置
上篇文章简单介绍了Django的基础知识,本篇将进入实际操作部分,包括Django的运行环境.开发环境配置与新建项目等内容.由于篇幅原因,笔者不得不把Demo演示放到下一篇文章,望读者(如果有的话)见 ...
- Deepin系统初体验指南:从安装到开发环境配置
深度操作系统(Deepin)是目前国内最流行和活跃的 Linux 发行版,一直以"免除新手痛苦.节约老手时间"为口号. 这篇文章落笔于 2020 年 10 月,此年,深之度正式发布 ...
- MAC M1 开发环境配置
MAC JAVA.C++ .MySQL开发环境配置 JAVA(JDK) & IDEA & MAVEN JDK IDEA MAVEN GIT DOCKER 安装 挂载问题 K8s C++ ...
- React Native 一:开发环境搭建
在学习React Native的过程中,相信对于一个App开发工程师,没有充分的学习过前端开发技术的同学来说,顺利的搭建好开发环境还是比较纠结的. 下面,我就根据我自己学习过程中的总结,跟大家讲解讲解 ...
- python ios开发环境_程序员的macOS系列:Mac开发环境配置
1.前言 最近在写<程序员的macOS系列>文章,之前写的第一篇 程序员的macOS系列:精选Mac App,大家都希望楼主尽快更新,结果拖到了2个月后,所以今天终于更新啦!其实macOS ...
最新文章
- 为什么delete表数据,磁盘空间却还是被占用
- 也谈压缩感知和贝叶斯大脑
- linux上pyenv卸载,Linux环境下的 pyenv的安装
- 笔记:编程的一些建议 - 时间伙伴 - 博客园
- 教你从0到1搭建秒杀系统-防超卖
- java adminlte 使用_AdminLTE2管理后台自定义
- Skywalking-02:如何写一个Skywalking trace插件
- 「Python基础知识」Python中常用的内建函数有哪些
- c语言自定义double函数例子,C语言的那些事——sqrt()函数 跟 double型数据的“%lf”...
- 记录一个手写场景的过程
- Raki的读paper小记:Soft Gazetteers for Low-Resource Named Entity Recognition
- fastdb学习记录#1 table、宏、query、cursor
- SEO人员,为什么要做流量过滤,如何操作?
- Linux dnf使用记录
- 自定义漂亮的圆形进度条
- 函数最值题目及答案_关于函数的习题及答案
- 黑洞猝灭剂BHQ-2 acid,1214891-99-2,BHQ-2 Carboxylic Acid用作各种荧光共振能量转移,这种探针主要用于分析。
- 毕业之后所有面试总结
- 树莓派初次开机配置教程
- java release_java的debug和release编译方式
热门文章
- 设置JFrame背景图片
- python 使用 redis expire属性设置访问时间间隔
- 转换 Byte 数组到 ... - 回复 高群 的问题
- java+flash在线拍照和编辑,保存到服务器(Spring3.2.2+swf+jquery)
- [转载]关于Android ProGuard混淆学习记录
- 别拒绝生命中偶尔的初恋
- Bitcoin Unlimited客户端发布新版本,删除了BSV协议功能
- 5月15日的硬分叉将会给BCH带来什么?
- window下使用nw.js开发桌面应用程序环境的搭建
- ES6中新增的字符串方法