基于Nodejs生态圈的TypeScript+React开发入门教程

基于Nodejs生态圈的TypeScript+React开发入门教程

 

1. 概述

本教程旨在为基于Nodejs npm生态圈的前端程序开发提供入门讲解。

1. Nodejs是什么

Nodejs是一个高性能JavaScript脚本运行环境，内部基于Chrome V8脚本引擎。它至关于把在浏览器中执行JavaScript脚本的功能抽取出来，做为一个单独的程序，可在桌面端命令行等环境中使用。

1. NPM是什么

NPM是nodejs包管理器(nodejs package manager)，目前已为全球最大的开源脚本仓库。它管理着成千上万的脚本程序库。它也提供了一个可在nodejs环境中执行的工具包，为咱们提供从仓库中下载类库，以及升级和卸载类库的功能。

1. 生态圈

可在npm中找到的类库以及工具备不少。

 

 

可是咱们对这些工具和类库的选择上应有取舍。本教程使用了如下工具或类库。

 

 

1. 环境搭建

   1. 安装Nodejs&npm

咱们首先从nodejs官网nodejs.org 下载nodejs安装包，要选择与本身系统相应版本(x86/x64)。

安装时一路Next。

在选择安装组件时，咱们能看到选项里有 nodejs运行核心这个是必须的，由于你须要它去运行脚本程序。

固然安装包里也集成了npm，咱们须要它来下载和管理类库和工具包，这两个咱们都须要。

Add to path 这一项是将npm包路径加到系统path中，这项也是很关键的，每每咱们使用npm安装了一个工具后，咱们须要在cmd命令行中直接调用这个工具，那这个选项就须要了。

在安装完成后，咱们能够做简单测试，在cmd中敲入node进入nodejs运行环境。

而后输入一段脚本，查看执行状况。

1. 使用VS Code

这里咱们选用一个简单的代码编辑器VS Code，而非使用VS等功能强大的IDE。咱们抛弃VS这些强大IDE的功能只为能更加深刻的了解在前端开发所需的各类工具的构建机制。咱们从vs code官网下载好安装包，安装以后，直接打开。

咱们新建一个空的项目文件夹，在VS CODE中打开，咱们可使用快捷键ctrl+~ 来快速在本目录中打开cmd命令行。

1. 使用NPM

咱们在命令行中敲入npm init 命令。此命令能够在项目目录中建立npm包配置文件package.json，此文件定义了这个项目所须要的各类模块，以及项目的配置信息（好比名称、版本、许可证等元数据）。

 

咱们采用默认设置就能够，最终在项目根目录会生成以下格式的配置文件。

 

以上配置为咱们在生成的基本配置文件上作了部分补充。

下面咱们来解释package.json中经常使用配置字段的用处：

 

• Main：main字段指定了项目加载的入口文件。若是你要从外部把咱们项目做为一个模块类库引用，则第一个执行的将会是入口文件。默认的入口文件名称为index.js。
• Scripts：scripts字段配置了能够用过npm run xx来运行的脚本命令。例如上面配置了一条tsc 的命令，咱们能够调用 npm run tsc 来执行这条命令。Start命令是scripts中系统内置的一条命令，意思是咱们能够经过调用npm start来启动咱们的项目。
• Dependencies：dependencies字段指定了项目运行时所依赖的模块。
• devDependencies：devDependencies字段指定了项目开发时所须要依赖的模块，它与dependencies字段都指向了一个类库和工具。改类库或工具包括名称和相应的版本。

 

由于systemjs和react是咱们须要在项目运行时所须要用到的类库，因此咱们把他放到dependencies中。

由于lite-server和concurrently是咱们在开发时所须要用到的工具，因此咱们把他放到devDependencies中。Lite-server是一个在开发时的轻量级HTTP服务器（至关于IIS提供的功能），concurrently是一个能够并行执行package.json scripts里面脚本的功能库。

 

如今项目配置已经有了，要依赖的类库和脚本也已经加到配置文件了。咱们如今须要将咱们依赖的类库或工具下载安装到咱们项目中使用。

Npm install 命令执行时会自动安装咱们package.json文件中定义的依赖项。从这里安装的软件包会以本地方式的来安装，也就是说安装的依赖包会自动放于本地项目根目录下的node_modules文件夹中。

 

Npm install 一次性安装好咱们package.json配置的类库和工具后，咱们还须要使用typescript和typings这两个工具。而咱们如今须要将这两个工具安装到全局目录中。

咱们在命令行中运行：

npm install –g typescript

npm install –g typings

npm会将这两个软件包安装到全局目录中，npm安装分两个位置：1.全局目录参数中加 -g，2.本地目录中

安装完成后咱们就可使用typescript软件库提供的tsc命令，将ts代码编译成js，使用typings来下载那些没有使用ts语言编写的公共类库的d.ts定义文件。

1. 更换NPM仓库源

由于NPM在国外和咱们国内网络相关的缘故，可能会在npm install 从仓库中下载包速度过慢。因此咱们能够把npm的仓库源切到咱们国内的服务器中，咱们能够经过下面的命令进行切换。

npm config set registry https://registry.npm.taobao.org

 

1. React和TypeScript

   1. React介绍

React是一个前端mvvm框架，它可使前端开发更加组件化，更加有利于前端控件的维护和共用。

 

React与Npm并无必然联系。它只是将本身的代码包在npm仓库发布了一份，方便用户经过npm进行下载安装，固然也是能够被其余能够运行在nodejs环境中的软件包依赖使用的。

 

React几大机制：

• 组件化

  React提倡以组件的思惟来开发前端UI，经过将UI的各个部分拆分红组件，使用时将其组装，这样职责单一功能清晰，更加有利于代码重用和后期的维护。

• 虚拟DOM

  为了达到对DOM控制的高性能和跨平台特性，React在HTML真实DOM上增长了一层虚拟DOM层。咱们在对DOM进行操做时，操做会在虚拟DOM层中先进行比对计算，找到真正须要修改的DOM元素，再对真实的HTML DOM进行修改，这样能够极大减小对真实DOM元素修改的数量和次数，从而提升性能。

• 状态驱动，单向数据绑定

  React在对DOM元素的修改操做，老是由组件的状态改变来驱动的。当组件内的状态数据修改时，React会自动计算须要修改的DOM来进行修改。而且数据绑定是单向的，也就是说当用户修改了页面DOM元素的值，并不会直接反向的影响到组件内的状态数据，只有当在这个DOM元素上绑定了相应的事件，经过这个事件来触发状态的修改，才能够更新组件内的状态值。

• JSX语法

  JSX语法是一种语法糖，它容许直接将HTML结构代码写在javascript脚本中，将html代码和javascript代码混合写在一块儿。以下：

  实际它最终经过编，译以后获得的仍然是javascript脚本代码。以下：

   

1. TypeScript介绍

TypeSciprt是一门脚本语言，它算是Javascript的加强版，它扩展Javascript的类库，增长了面向对象特性。固然它最大的特色是兼容Javascript，它能够将本身的代码编译成Javascript代码。

 

咱们将它配置为开发时工具放于咱们项目中使用，其主要目的是能够经过它的tsc命令将typescript编译为javascript代码。

 

TypeScript对Javascript的一些扩展：

• Class 类
• Enum 枚举
• Interface 接口
• <T> 泛型
• Namespace 命名空间

 

例如咱们开发一个类，并使用了继承，以下：

1. 开始使用

咱们如今将二者结合使用，咱们开发一个简单一点组件，命名为：HelloComponent

 

首先咱们建立HelloComponent.tsx 文件放于咱们项目下的scripts目录中。Tsx文件说明文件内部为使用了jsx语法的typescript脚本代码文件。

 

而后咱们将下面的代码加入其中：

最终在浏览器中的执行效果以下：

 

咱们对这段代码做一个大致讲解：

 

首先咱们经过import 来引用react类库

 

而后咱们编写一个本身的组件HelloComponent，此组件须要继承与React.Component 组件类。此类为一个泛型类<TP,TS>，泛型参数中须要传入两个类型：TP为这个组件的属性类型接口，TS为这个组件的状态类型接口。TP定义了外部调用组件时能够为组件传入的属性。TS定义了组件内部状态将具备哪些字段。

 

咱们在reder方法中编写咱们组件须要展现的html元素代码，咱们在input的value和span的显示文本中都绑定了this.state.text字段，这里当state.text作过变动后，这两个地方显示的内容也会随即进行修改。

 

如今问题是咱们如何修改咱们的状态数据。这里咱们首先在组件的构造函数里初始化了默认的状态。State.text使用了外部传入组件属性initText值。其次咱们在input中绑定了onChange事件，当此事件触发时，咱们也会修改state.text为input控件的value值。这样就达到了对state.text的修改，也就达到了界面显示的修改功能。

 

 

TypeScript在编译时咱们须要对它进行一些配置，咱们在项目根目录中增长tsconfig.json文件，在文件中加入如下配置代码：

咱们大致讲解一下此配置中各字段的含义：

• compileOnSave：启用在保存ts、tsx文件时即编译ts到js
• target：ts编译到js的目标版本，咱们通常用es5，方便作浏览器兼容
• module：ts编译到js所用的模块方式，模块方式有多种(commonjs、amd等)，咱们这里使用nodejs的模块组织方式 commonjs
• moduleResolution：ts查找模块所用的方式，有node和默认查找方式。配置为node意思为TypeScript能够从node_modules中查找ts模块。
• allowJs：是否支持识别js为ts模块
• jsx：指定当使用jsx语法编写的typescript文件tsx编译到js时，所使用的方式，这里咱们选择react，由于咱们须要将jsx语法编译成react javascript代码。

 

好了，typescript的配置文件咱们已经配置OK，咱们在命令行中直接执行tsc命令将tsx编译成js代码文件。

 

在编译时，咱们发现编译出错，提示找不到模块react。

由于react不是使用ts语言编写的，并且它也并无提供d.ts定义描述文件，因此ts不能识别它为模块。这里咱们须要为它补充一个d.ts文件，让ts可以识别它。

下面就轮到typings工具登场了。Typings工具的目的就是为那些没有使用ts语言编写的公共类库下载相应的d.ts定义文件。它有多个数据源，能够从多种地方查找咱们须要类库的d.ts文件，并下载。

 

咱们经过typings search react命令能看到与react相关的d.ts文件在不少个数据源都存在。这里咱们优先从dt数据源中下载便可。

 

咱们在命令行中敲入：

此命令typings会从 dt 数据源中安装react到咱们项目中。

--global指定这个react.dt.s将做为咱们项目全局定义来引用，将安装到项目根目录typings\globals目录中。

--save指定安装后，会将起记录到typings的配置文件,typings.json中。咱们在安装完成后，会看到typings为咱们在项目根目录自动生成了此文件。

 

React的定义文件咱们已安装完成，如今咱们再来执行tsc的编译命令。此次编译看到没有错误提示，并在HelloComponent.tsx当前目录中生成了HelloComponent.js文件。

1. 加载运行

React的组件咱们已开发完毕，如今咱们须要将它放于Html中展现出来。而在使用HelloComponent.js时，咱们能够有多种引用它的选择。咱们没有直接使用将其经过<script>标签放于html中的方式，而是使用经过systemjs模块资源加载器来加载它。

 

缘由有如下几点：

• 介于咱们在ts配置了是以commonjs模块方式生成的js，因此将其直接放到经过<script>标签引用到html中将不能识别require等方法。
• Systemjs这类的模块加载器，可以按需加载咱们所需的模块，并且会很好的解决模块之间的依赖关系。

 

首先咱们增长index.html到咱们的项目根目录中，代码以下：

咱们在html直接使用<script>标签引用的js文件只有system.js和system.config.js。咱们在使用system.js时，须要经过一些配置让它了解咱们项目的构成等。

System.config.js的配置代码以下：

咱们在其中配置了咱们使用的react和react-dom库，以及require方法。配置中各选项的详细说明须要到systemjs官网文档中查看，咱们在这里不作具体讲解。

 

好了如今一切就绪，咱们在命令行中执行npm start。因为咱们在package.json的scripts中配置了以下脚本命令。

因此npm 会为咱们并行执行tsc –w(此命令为ts能够开启监控项目中的全部ts文件，若是有变动，将会从新编译) 和 lite http服务器。

 

Lite http服务器启动后，会监听一个端口，并在咱们浏览器自动打开一个页面。

 

页面中显示的组件即是咱们开发的HelloComponent组件。如今咱们能够尽情的开始编写更多的组件，并组装使用他们吧。

 

本教程为基于nodejs生态环境下的前端开发react+typescript提供了一个入门基础教程，教程中涉及到的react,typescript,systemjs等知识，教程中只是针对作了一个大致的概述。咱们在之后的开发中，还须要经过各类渠道更加深刻了解它们。