博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
搭建Typescript+React项目模板(1) --- 项目初始化
阅读量:6656 次
发布时间:2019-06-25

本文共 2229 字,大约阅读时间需要 7 分钟。

相关文章和阅读顺序

目前集成

  • react - 16.4.x
  • react-router-dom - 4+
    • 状态管理库
  • typescript - 3.0.x
  • webpack - 4.16.x
    • 异步组件加载
    • 使 svg 可以以组件的方式引入
    • 用于替代css-loader的 css module 功能,并动态生成.scss.d.ts文件
  • husky
    • pre-commit

需求分析

因为模板是为以后项目开发所准备的前奏工作,所以在搭建之前我觉得首先需要先考虑以下几个方面:

  • 开发体验
  • 项目打包
  • 团队规范 那么这一篇就先做个起手式,先搭建一个简单的可以跑起来的架子

起手安装

  • 前置安装 首先需要全局安装typescript,这里默认大家都已经安装了node以及npm npm install -g typescript

  • 首先新建文件夹并进入 mkdir ts-react && cd ts-react

  • 然后进行初始化,生成package.jsontsconfig.json npm init -y && tsc --init

  • 安装开发工具 这里包含有webpack4, webpack-cli, webpack-dev-server npm install-D webpack webpack-cli webpack-dev-server

  • 安装react相关 因为需要整合ts,而react原本的包是不包含验证包的,所以这里也需要安装相关ts验证宝 npm install -S react react-dom npm install -D @types/react @types/react-dom

  • 安装ts-loader(或者awesome-typescript-loader) 这两款loader用于将ts代码编译成js代码,用法上差异较小,这里选择的是awesome-typescript-loader npm install -D awesome-typescript-loader

这个时候基本的安装步骤就完成了,以后需要什么再陆续添加进去,现在开始创建项目

项目启动

  • webpack配置

    1. 在项目根目录新建一个build文件夹,然后在里面新建webpack.config.js文件: mkdir build && cd build && touch webpack.config.js

    2. 根目录下新建src文件夹,然后在src里新建index.tsx文件作为项目入口: mkdir src && cd src && touch index.tsx

    3. 编写简单的webpack配置,只包含entryoutput:

    4. 编写awesome-typescript-loader配置项: 在webpack中的module是专门用来决定如何处理各种模块的配置项,例如本例中的typescript,这里主要用的配置项就是module.rules,而当前只需要简单配置解析.tsx文件类型即可

    5. src/index.tsx中写入口文件

      但是这时候你会发现有一个错误没有处理
      这是因为在tsconfig里面没有指定JSX的版本,这时候在tsconfigcompilerOptions中添加"jsx": "react"配置项即可消除错误 此外还需要注意一点,以后需要import xxx from 'xxx'这样的文件的话需要在webpack中的resolve项中配置extensions,这样以后引入文件就不需要带扩展名

    6. 添加页面模板: 在build文件夹下新建文件夹tpl,然后在tpl中新建一个index.html,如下:

      这时候有了页面模板还是不够的,还需要将页面模板和打包出来的js文件关联起来,因为考虑到以后打包出来的js的文件不会是一个固定的名称,所以这里需要使用一个webpack的插件html-webpack-plugin

    7. 配置html-webpack-plugin: 首先我们安装一下npm install -D html-webpack-plugin,然后在webpack的plugins配置项下进行一些简单配置:

      配置完成后就可以启动项目了

    8 . 配置tsconfig

    • 编译目标 这时候我们切回tsconfig配置中,会发现在compilerOptions配置项的targetes5,也就是说把ts代码编译成es5规范的代码,如果不做兼容的话,我们可以将它设置为es6,使其编译成es6的代码
    • 模块处理 在module项中,会发现生成的是commonjs的模块系统,因为不考虑兼容,所以这里我也将其设定为最新的esnext,并且将模块处理方式改为用node来处理,设置moduleResolution项为node,不做模块处理方式设置的话可能会有报错

    9 . 项目启动 这时候我们可以在package.json中添加启动命令 "dev": "webpack-dev-server --config build/webpack.config.js --mode development", 其中--mode development用于指定开发模式,否则在webpack4+版本下会有警告 然后直接npm run dev即可

总结

其实这个时候项目其实就已经跑起来了,完全可以不用往下看,但是实际上的工作并没有做完,下一章就开始讲解如何提高开发体验

转载地址:http://ajxto.baihongyu.com/

你可能感兴趣的文章
我的友情链接
查看>>
Windows下openssl的安装
查看>>
桌面支持--xp打开我的电脑很卡-解决办法
查看>>
Linux RPM和YUM包管理完全指南
查看>>
CentOS修改主机名
查看>>
MySQL中的concat、concat_ws、group_concat、reapeat函数
查看>>
LAMP apache針對中文 big5 語系編碼的設定參數修改
查看>>
grep系的介绍及正则表达式详解
查看>>
oracle不同的连接方式SID服务名
查看>>
使用用户首选项保存数据
查看>>
mysql高级
查看>>
zookeeper leader选举
查看>>
MailBee.NET Objects撰写邮件教程(二):发送一个网页
查看>>
我眼中的Linux系统和红帽RHCE认证
查看>>
mysql主从同步异步场景的分析
查看>>
Entangle 2.0 “Sodium”正式发布
查看>>
或许...你需要一份把心放进肚子里的安全感?
查看>>
koa源码分析(一)http模块
查看>>
HTTP请求三次握手协议
查看>>
持续集成工具Jenkins结合SVN的安装和使用
查看>>