模块化打包工具,前端常用单元测试

By admin in 4858美高梅 on 2019年4月12日

近年的一段时间一贯在搞TypeScript,二个巨硬出品、赋予JavaScript言语静态类型和编译的语言。
先是个精光选拔TypeScript重构的纯Node.js类型现已上线并安静运维了。
其次个上下端的项目方今也在重构中,关于前端基于webpackTypeScript套路从前也有涉嫌过:TypeScript在react项目中的实践。

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

 

前言

单元测试,简单的话正是技术人士的白盒测试(程序测试)。为了减弱产品的开发周期时间以及早先时期的修复代价,慢慢供给技术职员要在开发进度中梳理清晰本人费用成效逻辑,编写相对应的单元测试程序代码,用于对协调思考逻辑完结的一个校验测试。

前端开发人士编排单元测试的工具和框架有多少个主流的,但寻找了广大网址,发现未有哪位网址系统地讲述从零开首如何搭建前端的二个工具+框架自动化单元测试环境直至能够添加自文件可测试使用。所以,依照自个儿搭建的片段经历,小编总结了一部分步骤,搭建完结之后只必要保留一份,能够在里边添加分化的自定义js文件,都能够运转控制台命令针对js文件实行单元测试。(我的条件搭建是在window系统下的)

Unsplash

而是那几个做完事后也总感到缺了少数什么 (未有尽兴)

1. 概述

本课程目的在于为依据Nodejs
npm生态圈的前端程序支付提供入门讲解。

  1. ### Nodejs是什么

Nodejs是三个高质量JavaScript脚本运营条件,内部基于Chrome
V八脚本引擎。它约等于把在浏览器中实践JavaScript脚本的作用抽取出来,作为2个独门的先后,可在桌面端命令行等条件中选拔。

  1. ### NPM是什么

NPM是nodejs包管理器(nodejs package
manager),近年来已为环球最大的开源脚本仓库。它管理着众多的本子程序库。它也提供了一个可在nodejs环境中履行的工具包,为大家提供从仓库中下载类库,以及升级换代和卸载类库的功能。

一、测试框架/工具

  • 测试管理工科具: karma
  • 测试框架: mocha/jasmine(本文讲述的是mocha)
  • 断言库: chai
  • 测试浏览器: Phantomjs
  • 测试覆盖率: karma-coverage

本篇博文的内容听说 入门
Webpack,看那篇就够了
该篇作品计算而来,其代码、模块示例、功效进行部分均具有删减,假若想询问愈来愈多关于
WebPack 的详细内容,敬请参考原作

4858美高梅 1
没有错,仍然有百分之二拾的JavaScript代码存在于项目中,作为三个TypeScript的示范项目,表现的很不纯粹。
为此有未有非常的大或然将那几个JavaScript代码也换成TypeScript呢?
答案自然是某个,首先须求分析那个代码都以如何:

1. 生态圈

可在npm中找到的类库以及工具有过多。

模块化打包工具,前端常用单元测试。 

4858美高梅 2

 

只是大家对那个工具和类库的选料上理应取舍。本课程使用了以下工具或类库。

 

4858美高梅 3

 

贰、构建核心的原生js单元测试

一. 创建项目标package.json
创制1个空项目文件夹,如mytest,在品种根目录下进行控制台命令:npm
init

npm init

以往遵照提醒进行创办基础的package.json文件新闻即可(小编都是从来按Enter):

初始化package.json文件.png

二. 布局项目标package.json
各自施行以下控制台命令,将急需的工具/环境设置到花色中,安装完结后pakeage.json的devDependencies
中相应变更出现有关设置工具依赖。

推行的操纵台命令:

npm install –save-dev karma

npm install –save-dev karma-mocha

npm install –save-dev karma-chai

npm install –save-dev karma-phantomjs-launcher

npm install –save-dev karma-coverage

npm install –save-dev mocha chai

享有工具/环境设置成功后,package.json中是devDependencies那样的:

"devDependencies": {
    "chai": "^3.5.0",
    "karma": "^1.4.1",
    "karma-chai": "^0.1.0",
    "karma-coverage": "^1.1.1",
    "karma-mocha": "^1.3.0",
    "karma-phantomjs-launcher": "^1.0.2",
    "mocha": "^3.2.0"
  }

三. 开始化Karma配置文件
在档次的根目录运转karma
init
,初叶化配置成功后会在根目录下生成karma.conf.js文件。

karma init

依照截图举办初阶化配置:

karma起先化配置.png

意味着配置利用mocha框架以及PhantomJS无页面浏览器执行前端js代码的单元测试,配置须要被测试的代码和测试代码放在src/和test/文件夹中。

填补表达:
在类型下安装完全部片段环境之后,根目录下运作karma
init命令行只怕仍会报错(karma init为无用命令等)
化解方案:在本电脑全局下安装karma

npm i karma -g

四. 修改Karma基本配备
那会儿开首化的karma.conf.js只是最基本的karma配置,大家还须求手动修改部分地点。

  • 在内部的frameworks1项中扩张chai:

frameworks: ['mocha','chai'],
  • 然后在config.set({})中添加:

plupins:[
        'karma-mocha',
        'karma-chai',
        'karma-phantomjs-launcher'
    ]

5. 针对性覆盖率修改Karma配置文件

  • 在preprocessors和reporters中添加:

preprocessors: {
        'src/*.js':['coverage']
    },

    reporters: ['progress','coverage'],
  • 然后在config.set({})中的plugins中添加:

plugins:[
        'karma-mocha',
        'karma-chai',
        'karma-phantomjs-launcher',
        'karma-coverage'
    ]

陆. 发轫编写制定测试代码
透过上述手续,基本上单元测试的工具/环境依赖已设置到位,能够初始展开源代码的编辑测试。
在上文的起头化Karma配置时,已经告诉Karma,供给被测试的代码和测试代码放在src/和test/文件夹中,所以我们应有在src/文件夹下提供要被测试的代码,在test/文件夹下提供测试代码:

在src/文件夹中新建index.js文件,在这么些文件中添加八个相当不难的函数:

function isNum(num){
    return typeof num === "number"
}
function isString(str){
    return typeof str === "string"
}
function isLarge10(num){
    return num > 10;
}

然后在test/文件夹中新建index.test.js文件。常常,测试脚本与所要测试的源码脚
本同名,然而后缀名字为.test.js(表示测试)只怕.spec.js(表示原则)。在该文件
中起初编写制定测试代码:

describe('index.js的测试',function(){
    it('1应该是数字',function(){
        //expect(isNum(1)).to.be.true
        isNum(1).should.equal(true);
    })
    it('"1"应该是字符',function(){
        //expect(isString("1")).to.be.true
        isString("1").should.equal(true);
    })
    it('11大于10',function(){
        //expect(isLarge10(11)).to.be.true
        isLarge10(11).should.equal(true);
    })
})

编排测试文件时,describe、it都以由mocha提供的测试用api:

describe块成为“测试套件”,表示1组有关的测试。他是八个函数,第二个参数是测试套件的称号,第3个参数是切实可行要实施的测试函数;

it块称为测试用例,表示八个独立的测试,即测试的微乎其微单位。他也是三个函数,第八个参数表示测试用例的称呼,第1个参数表示具体需要履行的断言函数;

七. 运营单元测试
被测试代码和测试代码编写完结后,在档次根目录输入:karma start

karma start

假定测试不经过,测试套件和测试用例的描述都会在命令行输出,告诉你何地测试败北了。并且那时你改改任意代码,单元测试便会在你保存后自动运转。
您的项目中便会多出几个coverage文件夹,文件夹中依照浏览器分了覆盖率总括结果,大家选拔的是PhantomJs,自然会有三个PhantomJs*文本夹,用浏览器打开index.html便可查阅测试覆盖率。

(补充表达:在本身设置局地单元测试环境正视后,会设有履行karma
start命令时报错
的意况,所以可能新手朋友们在此步骤执行时也会产出报错,小编分析是因为唯有karma在大局安装了,而其余的拥有条件都以在项目目录下进展一些安装的,此时运营karma
start使用全局环境karma去执行命令就会发觉全局中从未任何模块而导致报错,基本上报错类型包蕴提醒mocha模块出错,加载不了coverage模块,加载不了chai模块等等,近日本人找到的化解方案正是对于报错的工具/环境实行全局执行安装,如全局安装mocha执行控制台命令:

npm install mocha -g

缓解思路正是贫乏什么就对什么进行全局安装。

好了,以上就是自己自个儿在安装使用前端单元测试工具和框架时部分步骤的简练总结,依据那个手续能够着力成立3个原生js文件的测试环境包,之后只必要把要测试的js源文件放进src文件夹,把对应源文件的协调依照chai断言库编写的单元测试用例文件放进test文件夹中,再履行karma
start命令就能够测试自身的js逻辑。

WebPack
的成效是将你的品种作为多少个全部,通过分析项目标结构,找到项目中有所依赖的
JavaScript 模块,以及其它的一部分浏览器不可能直接运营的进展语言,如 Scss,
TypeScript 等,并将其转移和打包为浏览器可识别的 JavaScript
文件,在众多情景下可替代 居尔p/Grunt 类工具

  • Webpack4858美高梅,卷入时的安插文件
  • 1些总结的测试用例(使用的mocha和chai)

1. 环境搭建

1.  ### 安装Nodejs&npm 

我们率先从nodejs官网nodejs.org
下载nodejs安装包,要选拔与温馨系统相应版本(x86/x6四)。

4858美高梅 4

设置时协同Next。

在接纳设置组件时,大家能来看选项里有
nodejs运营基本这几个是必须的,因为您须要它去运作脚本程序。

理所当然安装包里也集成了npm,我们供给它来下载和保管类库和工具包,那多少个大家都亟需。

Add to path
那一项是将npm包路径加到系统path中,那项也是很重点的,往往大家使用npm安装了二个工具后,大家必要在cmd命令行中央直机关接调用这一个工具,那这几个选项就供给了。

4858美高梅 5

在装置到位后,大家能够作不难测试,在cmd中敲入node进入nodejs运转条件。

然后输入1段脚本,查看执市价况。

  1. ### 使用VS Code

那边我们选择3个简短的代码编辑器VS
Code,而非使用VS等成效强大的IDE。我们抛开VS那个强大IDE的效果只为能越来越尖锐的垂询在前端开发所需的各个工具的创设机制。大家从vs
code官网下载好安装包,安装之后,直接打开。

4858美高梅 6

我们新建贰个空的项目文件夹,在VS
CODE中开辟,我们能够利用快速键ctrl+~ 来快速在本目录中开拓cmd命令行。

4858美高梅 7

  1. ### 使用NPM

小编们在指令行中敲入npm
init
命令。此命令能够在类型目录中开创npm包配置文件package.json,此文件定义了这一个项目所急需的种种模块,以及项指标安顿消息(比如名称、版本、许可证等元数据)。

4858美高梅 8

 

咱俩选择暗中认可设置就足以,最后在档次根目录会生成如下格式的安顿文件。

 

4858美高梅 9

如上配置为我们在云谲波诡的主干配备文件上做了一部分补充。

下边大家来表达package.json中常用配置字段的用途:

 

  • Main:main字段钦点了品种加载的输入文件。如若你要从表面把咱们项目作为多少个模块类库引用,则第1个实施的将会是进口文件。暗许的输入文件名叫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是2个得以并行执行package.json
scripts里面脚本的效率库。

 

现在项目布局已经有了,要依靠的类库宁海平调本也已经加到配置文件了。大家前几天亟需将大家依靠的类库或工具下载安装到大家项目中采纳。

Npm install
命令执行时会自动安装大家package.json文件中定义的借助项。从那边设置的软件包会以本土情势的来安装,相当于说安装的依靠包会自动放于本地品种根目录下的node_modules文件夹中。

 

Npm install
2回性安装好大家package.json配置的类库和工具后,大家还亟需选取typescript和typings那四个工具。而大家今后要求将那多少个工具安装到全局目录中。

我们在命令行中运转:

npm install –g
typescript

npm install –g
typings

npm会将那五个软件包安装到全局目录中,npm安装分四个地方:一.全局目录参数中加
-g,2.本地目录中

设置到位后我们就足以选拔typescript软件库提供的tsc命令,将ts代码编译成js,使用typings来下载那个尚未行使ts语言编写的公共类库的d.ts定义文件。

  1. ### 更换NPM仓库源

因为NPM在外国和我们国内网络有关的原委,或许会在npm
install
从仓库中下载包速度过慢。所以大家得以把npm的库住房来源切到大家国内的服务器中,大家得以因此下边包车型大巴通令举行切换。

npm config set registry

 

在正规上课 WebPack 此前,我们要求对 Node 和 npm
有所明白,不驾驭的同班可查看 居尔p
前端自动化营造筑工程具
那篇小说实行学习

精晓了是哪些地方还在运用JavaScript,那件事情就变得很好消除了,从营造筑工程具(Webpack)起头,每个击破,将那个全体交替为TypeScript

1. React和TypeScript

1.  #### React介绍 

React是1个前端mvvm框架,它可以使前端开发尤其组件化,特别有利前端控件的护卫和国有。

 

React与Npm并未必然联系。它只是将团结的代码包在npm仓库发表了壹份,方便用户通过npm实行下载安装,当然也是可以被此外能够运作在nodejs环境中的软件包依赖使用的。

 

React几大机制:

  • 组件化

    React提倡以组件的构思来支付前端UI,通过将UI的1一部分拆分成组件,使用时将其组装,那样任务单一功用清晰,尤其便于代码重用和末代的掩护。

  • 虚拟DOM

    为了完成对DOM控制的高质量和跨平台湾特务性,React在HTML真实DOM上平添了一层虚拟DOM层。大家在对DOM实行操作时,操作会在虚拟DOM层中先举办比对总结,找到真正必要修改的DOM元素,再对实在的HTML
    DOM实行修改,那样能够一点都不小减弱对实事求是DOM成分修改的数据和次数,从而进步性能。

![](https://images2015.cnblogs.com/blog/86219/201612/86219-20161212101813745-959605954.png) 
  • 地方驱动,单向数据绑定
React在对DOM元素的修改操作,总是由组件的状态改变来驱动的。当组件内的状态数据修改时,React会自动计算需要修改的DOM来进行修改。并且数据绑定是单向的,也就是说当用户修改了页面DOM元素的值,并不会直接反向的影响到组件内的状态数据,只有当在这个DOM元素上绑定了相应的事件,通过这个事件来触发状态的修改,才可以更新组件内的状态值。
  • JSX语法

    JSX语法是壹种语法糖,它同意直接将HTML结构代码写在javascript脚本中,将html代码和javascript代码混合写在联合署名。如下:

![](https://images2015.cnblogs.com/blog/86219/201612/86219-20161212101814198-685789404.png) 

实际它最终通过编,译之后得到的仍然是javascript脚本代码。如下:


 

![](https://images2015.cnblogs.com/blog/86219/201612/86219-20161212101814495-186865581.png) 
  1. #### TypeScript介绍

TypeSciprt是一门脚本语言,它究竟Javascript的增强版,它扩大Javascript的类库,增添了面向对象特性。当然它最大的天性是包容Javascript,它可以将团结的代码编写翻译成Javascript代码。

 

大家将它配备为开发时工具放于大家项目中利用,其重要性目标是足以因此它的tsc命令将typescript编写翻译为javascript代码。

 

TypeScript对Javascript的壹对扩大:

  • Class 类

  • Enum 枚举

  • Interface 接口

  • <T> 泛型
  • Namespace
    命名空间

 

诸如我们付出四个类,并运用了持续,如下:

4858美高梅 10

  1. #### 开端应用

我们后天将五头结合使用,大家付出三个简练一点零部件,命名叫:HelloComponent

 

第2大家成立HelloComponent.tsx
文件放于我们项目下的scripts目录中。Tsx文件注脚文件之中为利用了jsx语法的typescript脚本代码文件。

 

然后大家将上面包车型大巴代码参加个中:

4858美高梅 11末了在浏览器中的执行效果如下:

4858美高梅 12

 

大家对那段代码作2个光景讲解:

 

先是大家通过import 来引用react类库

 

然后大家编辑三个温馨的零件HelloComponent,此组件供给持续与React.Component
组件类。此类为1个泛型类<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的改动,也就完毕了界面展现的修改功用。

 

4858美高梅 13

 

TypeScript在编写翻译时大家须求对它进行1些铺排,我们在类型根目录中追加tsconfig.json文件,在文书中进入以下配置代码:

4858美高梅 14

作者们大体讲解一下此布署中各字段的意思:

  • compileOnSave:启用在保存ts、tsx文件时即编写翻译ts到js
  • target:ts编写翻译到js的靶子版本,大家壹般用es五,方便做浏览器兼容
  • 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代码文件。

4858美高梅 15

 

在编写翻译时,大家发现编写翻译出错,提醒找不到模块react。

因为react不是应用ts语言编写的,而且它也并不曾提供d.ts定义描述文件,所以ts无法辨别它为模块。那里大家必要为它填补三个d.ts文件,让ts能够辨识它。

上面就轮到typings工具登场了。Typings工具的指标就是为那几个尚未利用ts语言编写的国有类库下载相应的d.ts定义文件。它有多少个数据源,能够从三种地点寻找大家供给类库的d.ts文件,并下载。

 

4858美高梅 16大家经过typings search
react命令能观望与react相关的d.ts文件在诸五个数据源都存在。那里大家先行从dt数据源中下载即可。

 

咱俩在指令行中敲入:

4858美高梅 17此命令typings会从 dt
数据源中安装react到我们项目中。

–global钦定这一个react.dt.s将用作大家项目全局定义来引用,将安装到品种根目录typings\globals目录中。

–save指虞诩装后,会将起记录到typings的安顿文件,typings.json中。大家在安装完毕后,会面到typings为我们在项目根目录自动生成了此文件。

 

React的概念文件大家已设置实现,今后大家再来执行tsc的编写翻译命令。此次编写翻译看到没有不当提醒,并在HelloComponent.tsx当前目录中生成了HelloComponent.js文件。

一. 安装及选择

Webpack 的 TypeScript 达成版本

在这8102年,很幸福,Webpack法定已经支撑了TypeScript编写制定配置文件,文书档案地址。
除了TypeScript以外还扶助JSXCoffeeScript的解释器,在那就马虎它们的存在了

一. 加载运维

React的机件大家已支付达成,以往大家要求将它放于Html中显得出来。而在应用HelloComponent.js时,我们能够有两种引用它的挑选。大家从没向来运用将其通过<script>标签放于html中的方式,而是利用通过systemjs模块财富加载器来加载它。

 

原因有以下几点:

  • 在于大家在ts配置了是以commonjs模块情势变通的js,所以将其从来放到通过<script>标签引用到html团长不能够识别require等方法。
  • Systemjs那类的模块加载器,可以按需加载大家所需的模块,而且会很好的缓解模块之间的依靠关系。

 

先是大家增添index.html到大家的类型根目录中,代码如下:

4858美高梅 18大家在html直接行使<script>标签引用的js文件唯有system.js和system.config.js。大家在动用system.js时,须求通过有个别陈设让它驾驭大家项指标组合等。

System.config.js的配备代码如下:

4858美高梅 19

大家在内部布置了大家采纳的react和react-dom库,以及require方法。配置中各选择的详尽表明必要到systemjs官网文书档案中查看,大家在此地不做具体讲解。

 

好了现行反革命整个就绪,我们在指令行中执行npm
start。由于我们在package.json的scripts中布局了如下脚本命令。

4858美高梅 20

之所以npm 会为我们并行执行tsc
–w(此命令为ts能够拉开监察和控制项目中的全数ts文件,若是有改动,将会再度编写翻译)
和 lite http服务器。

 

Lite
http服务器运行后,会监听三个端口,并在大家浏览器自动打开2个页面。

4858美高梅 21

 

页面中呈现的零件就是我们开发的HelloComponent组件。未来我们能够尽情的初始编写制定更加多的零部件,并组建使用他们吗。

 

本课程为依据nodejs生态环境下的前端开发react+typescript提供了1个入门基础教程,教程中涉嫌到的react,typescript,systemjs等知识,教程中只是本着做了一个大体的概述。大家在之后的费用中,还亟需经过各样渠道更介一语破的摸底它们。

新建3个空的文本夹,命名称为 WebPack,在巅峰中 cd
进该文件夹后,键入下述指令完毕 webpack 的安装

借助于的设置

先是是要设置TypeScript有关的壹套各样注重,包蕴解释器及该语言的主干模块:

npm install -D typescript ts-node

typescript为这些语言的中坚模块,ts-node用于直接实施.ts文本,而不须要像tsc那样会编写翻译输出.js文件。

ts-node helloworld.ts

因为要在TypeScript环境下行使Webpack连锁的东东,所以要安装相应的types
也就是Webpack所对应的那多少个*.d.ts,用来告诉TypeScript那是个怎么样指标,提供哪些方法。

npm i -D @types/webpack

局地常用的pLugin都会有照应的@types文本,能够省略的通过npm info @types/XXX来检查是还是不是存在

假使是局地小众的plugin,则大概须要自个儿创办对应的d.ts文本,例如大家直接在用的qiniu-webpack-plugin,这一个就从未有过对应的@types包的,所以就协调创设贰个空文件来报告TypeScript那是个什么:

declare module 'qiniu-webpack-plugin' // 就一个简单的定义即可

// 如果还有其他的包,直接放到同一个文件就行了
// 文件名也没有要求,保证是 d.ts 结尾即可

放置的地方并未有何样范围,随便丢,一般建议松手types文件夹下

末尾正是.ts文本在实践时的局地布置文件设置。
用来执行Webpack.ts文件对tsconfig.json有一些微小要求。
compilerOptions下的target慎选必须是es5,这些象征着输出的格式。
以及module务求选用commonjs

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es5",
    "esModuleInterop": true
  }
}

但1般来讲,执行Webpack的同级目录都早就存在了tsconfig.json,用于实际的前端代码编写翻译,很只怕八个布局文件的参数并不一致。
万壹因为要使用Webpack去修改真正的代码配置参数肯定是不可取的。
由此大家就会用到这般三个包,用来改变ts-node推行时所依靠的布置文件:tsconfig-paths

Readme中发现了这么的传教:If process.env.TS_NODE_PROJECT is set it will be used to resolved tsconfig.json
Webpack的文书档案中相同也涉嫌了那句,所以那是二个合营的法子,在指令运转时内定叁个路线,在不影响原本配置的情事下创建五个供Webpack装进时选用的配置。

  1. 将上述的布署文件改名字为其它名称,Webpack文书档案示例中为tsconfig-for-webpack-config.json,那里就直接沿用了
  2. 接下来添加npm script如下

{
  "scripts": {
    "build": "TS_NODE_PROJECT=tsconfig-for-webpack-config.json webpack --config configs.ts"
  }
}
//全局安装
npm i webpack -g
//安装到你的项目目录
npm i webpack -D

文件的编辑

有关配置文件,从JavaScript切换到TypeScript事实上并不会有太大的改变,因为Webpack的安顿文件大多都以写死的公文/常量。
多多品种都是自动生成的,基本得以不用手动钦赐,3个粗略的示范:

import { Configuration } from 'webpack'

const config: Configuration = {
  mode: process.env.NODE_ENV === 'production' ? 'production' : 'development',
}

export default config

Configuration是一个Webpack概念的接口(interface),用来规范一个对象的一颦一笑。
VS Code下按住Command +
单击能够直接跳转到具体的webpack.d.ts概念文件这里,能够看出详细的定义新闻。
4858美高梅 22
种种常用的规则都写在了此处,使用TypeScript的1个好处就是,当要贯彻1个成效时你不再必要去网址上询问相应要安排如何,能够直接翻看d.ts的定义。
就算注释写得丰富完善,基本能够算作文档来用了,而且在VS Code编辑器中还有动态的唤起,以及1些不当的拨乱反正,比如上述的NODE_ENV的收获,即使一向写process.env.NODE_ENV || 'development'是会抛出二个卓殊的,因为从d.ts中能够看看,关于mode只有几个有效值productiondevelopemntnone,而process.env.NODE_ENV引人注目只是二个字符串类型的变量。
4858美高梅 23
因此大家必要运用雅士利运算符保证传入的参数一定是大家想要的。

以及在编排的长河中,要是有部分自定义的plugin等等的,大概在动用的历程中会抛至极提醒说有些对象不是实用的Plugin对象,1个一点也不细略的法子,在对应的plugin前边添加四个as webpack.Plugin即可。

在这里TypeScript所做的只是静态的检查,并不会对实在的代码执行造成其余影响,就算类型因为强行as而改变,也只是编写翻译期的修改,在实际执行的JavaScript代码中依然弱类型的

在完毕了上述的操作后,再实践npm run XXX就足以一直运转TypeScript版本的Webpack配置咯。

安装达成现在,在该目录下运作 npm init 新建 package.json
文件,以保存项目有关音讯,该公文也能够手动新建,要求填写诸如项目名称,项目描述,我等消息

追究时期的一件轶事

因为本身的门类根目录已经设置了ts-node,而前者项目是用作当中的二个文件夹存在的,所以就从未再度开始展览安装。
那就带来了2个令人湿疹的难点。

首先全部流程走完事后,作者一向在命令行中输入TS_NODE_PROJECT=XXX.json NODE_ENV=dev webpack --config ./webpack/dev.ts
一应俱全运会行,然后将那行命令放到了npm scripts中:

{
  "scripts": {
    "start": "TS_NODE_PROJECT=XXX.json NODE_ENV=dev webpack --config ./webpack/dev.ts"
  }
}

再也运转npm start,发现居然出错了-.-,提示笔者说import语法不能够被识别,这几个很明白正是从未应用我们在ts_NODE_PROJECT中钦定的config文件。
刚起头并不知道问题出在哪,因为那几个在指令行中央直机关接实施并从未别的难题。
中间早就疑心是还是不是是环境变量没有被科学安装,还运用了cross-env其壹插件,甚至将下令写到了叁个sh文件中展开实施。
然则难点如故留存,后来在2个群中跟同伴们聊起了这么些题材,有人提议,您是不是大局安装了ts-node
检查之后发现,果然没有错,在命令行执行时接纳的是全局的ts-node,但是在npm scripts中动用的是本土的ts-node
在指令行环境执行时还以为是会活动物检疫索父文件夹node_modules上面包车型客车重视,其实是使用的大局包。
宝贝的在client-src文件夹下也设置了ts-node就消除了这么些难点。
大局正视害人。。

package.json

测试用例的改造

前边的Webpack改为TypeScript大部缘故是因为失眠所致。
而是测试用例的TypeScript改建则是二个能小幅度提升作用的操作。

咱俩在根目录下新建 apppublic 文件夹,并在 app 文件夹下新建
Greeter.jsmain.js 文件,在 public 文件夹下新建 index.html
文件

缘何要在测试用例中央银行使 TypeScript

测试用例使用chai来编写,(之前的Postman也是用的chai的语法)
chai提供了一名目繁多的语义化链式调用来贯彻断言。
在以前的享用中也事关过,这么多的吩咐你并不须求完全记住,只晓得三个expect(XXX).to.equal(true)就够了。

只是如此的全文to.equal(true)是巨丑无比的,而只要采取那个语义化的链式调用,在不熟练的状态下很简单就会收获:

Error: XXX.XXX is not a function

因为那着实有3个门槛难题,要求求写过多才能记住调用规则,各个notincludes的操作。
而是接入了TypeScript从此,这几个难点都消除了。
也是前方提到的,全数的TypeScript模块都有其相应的.d.ts文件,用来报告大家以此模块是做如何的,提供了什么能够应用。
也正是说在测试用例编写时,大家得以经过动态提示来火速的书写断言,而不供给组合着文书档案去实行“翻译”。

4858美高梅 24
4858美高梅 25

我们在 Greeter.js 中定义3个回来包罗问候音信的 html
成分的函数,并基于 CommonJS 规范导出这些函数为一个模块,在 main.js
文件中把 Greeter 模块重回的节点插入页面

运用方法

只借使事先有写过mochachai的童鞋,基本上修改文件后缀+安装相应的@types即可。
可以一向跳到那边来:起来编写制定测试脚本
不过要是对测试用例感兴趣,但是并未选择过的童鞋,能够看下边包车型大巴一个着力步骤。

// Greeter.js
module.exports = function() {
    var greet = document.createElement('div');
    greet.textContent = "love and peace";
    return greet;
};

//main.js 
const greeter = require('./Greeter.js');
document.querySelector("#root").appendChild(greeter());

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id='root'>
    </div>
    <script src="bundle.js"></script>
</body>
</html>

安装依赖

  1. TypeScript相关的设置,npm i -D typescript ts-node
  2. Mochachai有关的装置,npm i -D mocha chai @types/mocha @types/chai
  3. 设若须求涉及到部分API的央浼,能够附加安装chai-httpnpm i -D chai-http @types/chai-http

环境的信赖就曾经完成了,假诺额外的施用部分其余的插件,记得安装相应的@types文本即可。
如若有应用ESLint之类的插件,恐怕会提示modules非得存在于dependencies而非devDependencies
这是ESLint的import/no-extraneous-dependencies规则导致的,针对那几个,大家脚下的方案是添加壹些不如:

import/no-extraneous-dependencies:
  - 2
  - devDependencies:
    - "**/*.test.js"
    - "**/*.spec.js"
    - "**/webpack*"
    - "**/webpack/*"

本着那些目录下的文书/文件夹不实行校验。没错,webpack的施用也会遇见那么些标题

目录结构

开班编制测试脚本

一旦是对原来的测试脚本进行改动,无外乎修改后缀、添加一些必不可缺的门类注明,不会对逻辑造成任何改动。

紧接着我们依照 webpack {entry file} {destination for bundled file}
的吩咐格式,并依照自个儿的 WebPack 是或不是全局安装,来键入对应的下令运营WebPack,{extry file}
出填写入口文件的门径,{destination for bundled file}
填写的是包装文件的存放路径

2个简单易行的演示

// number-comma.ts
export default (num: number | string) => String(num).replace(/\B(?=(\d{3})+$)/g, ',')

// number-comma.spec.ts
import chai from 'chai'
import numberComma from './number-comma'

const { expect } = chai

// 测试项
describe('number-comma', () => {
  // 子项目1
  it('`1234567` should transform to `1,234,567`', done => {
    expect(numberComma(1234567)).to.equal('1,234,567')
    done()
  })

  // 子项目2
  it('`123` should never transform', done => {
    const num = 123
    expect(numberComma(num)).to.equal(String(num))
    done()
  })
})

只要全局未有设置mocha,记得将指令写到npm script中,大概经过下述形式履行

./node_modules/mocha/bin/mocha -r ts-node/register test/number-comma.spec.ts

# 如果直接这样写,会抛出异常提示 mocha 不是命令
mocha -r ts-node/register test/number-comma.spec.ts

mocha有星星点点相比较好的是提供了-r一声令下来让您手动钦定执行测试用例脚本所利用的解释器,那里直接设置为ts-node的路径ts-node/register,然后就足以在前面直接跟二个文本名(可能是有的通配符)。

时下大家在类型中批量进行测试用例的指令如下:

{
  "scripts": {
    "test": "mocha -r ts-node/register test/**/*.spec.ts"
  }
}

npm test能够直接调用,而不必要添加run命令符,类似的还有startbuild等等

一键实践现在就足以拿走大家想要的结果了,再也不用担心1些代码的变更会潜移默化到别的模块的逻辑了
(前提是认真写测试用例)

4858美高梅 26

# webpack 全局安装的情况
webpack app/main.js public/bundle.js

# webpack 非全局安装的情况
node_modules/.bin/webpack app/main.js public/bundle.js

小结

做完上面两步的操作之后,我们的种类就兑现了百分之百的TypeScript化,在任哪个地方方享受静态编写翻译语法所带来的便宜。
依附更新后的代码含量截图:

4858美高梅 27

前不久针对TypeScript做了许多业务,从Node.jsReact以及这一次的WebpackMocha+Chai
TypeScript因为其设有3个编写翻译的经过,相当大的减退了代码出bug的大概性,提升程序的稳定度。
圆满切换来TypeScript更是能够降低在二种语法之间相互切换时所带来的不需求的开销,祝我们搬砖高兴。

WebPack 运转进度

前边境海关于 TypeScript 的笔记

  • TypeScript在node项目中的实践
  • TypeScript在react项目中的实践

运行结果

二个1体化的 TypeScript 示例

typescript-example

欢迎各位来谈谈关于TypeScript运用上的片段标题,针对稳重的感到不足之处也欢迎提议。

贰. 布局文件

参考资料

  • ts-node
  • configuration-languages |
    webpack
  • mochajs
  • chaijs

大家恰好已经成功打包了八个 JS
文件了,但相比较麻烦的是,我们供给在终端输入很短的一声令下,而在实质上支付中,我们是通过另1种方法进行李包裹装的

我们先在 WebPack 的根目录下新建1个名叫 webpack.config.js
的文件,并在其间写入上面包车型客车布局代码,重要涉嫌到的始末是进口文件路径和打包后文件的存放路径,__dirname
是 Node.js 中的一个全局变量,它指向当前推行脚本所在的目录

// webpack.config.js
module.exports = {
    entry:  __dirname + "/app/main.js", //唯一的入口文件
    output: {
        path: __dirname + "/public", //打包后的文件存放的地方
        filename: "bundle.js" //打包后输出文件的文件名
    }
}

有了该配置文件之后,我们只须要在终端里运营 webpack (非全局安装需利用
node_modules/.bin/webpack) 命令就足以了,该命令会自动引用
webpack.config.js 文件中的配置选项

运营结果

除去那种方法之外,大家还能对 npm 举行配备,在 package.json 文件中对
scripts 对象开始展览有关安装,然后在指令行中使用 npm start 命令即可运营

{
  "name": "webpack_demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^3.10.0"
  }
}

运维结果

内需专注的是 npm 的 start 命令是一个出奇的脚本名称,在指令行中使用
npm start 就能够执行其对于的命令,借使对应的此脚本名称不是
start,想要在命令行中运行时,须要这么用 npm run {script name}
npm run build

3. 调试

大家将文件打包之后,很难找到大家写的代码所对应的地点,假若想要对代码进行改动,我们能够通过
Source Maps 来找到我们代码所对应的地方,只供给在 webpack
的配备文件中配备 devtool,webpack 就足以在卷入时为大家转变的 Source
Maps,那为大家提供了一种对应编译文件和源文件的法子,使得编译后的代码可读性越来越高,也更便于调节和测试

devtool 选项 配置结果
source-map 在一个单独的文件中产生一个完整且功能完全的文件,这个文件具有最好的 Source Map,但是它会减慢打包速度
cheap-module-source-map 在一个单独的文件中生成一个不带列映射的 Map,不带列映射提高了打包速度,但是也使得浏览器开发者工具只能对应到具体的行,不能对应到具体的列(符号),会对调试造成不便
eval-source-map 使用eval打包源文件模块,在同一个文件中生成干净的完整的 Source Map,这个选项可以在不影响构建速度的前提下生成完整的 Source Map,但是对打包后输出的 JavaScript 文件的执行具有性能和安全的隐患,在开发阶段这是一个非常好的选项,在生产阶段则一定不要启用这个选项
cheap-module-eval-source-map 这是在打包文件时最快的生成 Source Map 的方法,生成的 Source Map 会和打包后的 JavaScript 文件同行显示,没有列映射,和 eval-source-map 选项具有相似的缺点

上述选项由上到下打包速度更快,但是同时也保有越多的阴暗面效应,较快的打包速度的结果正是对包裹后的文件的的实施有早晚影响,对小到中型的种类中,eval-source-map
是一个很好的选项,并且只应该开发阶段使用它,同样的,我们那边选择的是
eval-source-map 选项,配置如下:

// webpack.config.js
module.exports = {
    devtool: 'eval-source-map',
    entry:  __dirname + "/app/main.js", 
    output: {
        path: __dirname + "/public",
        filename: "bundle.js"
    }
}

四. 地点服务器

打开静态服务器,实时监听本身的代码修改,节省我们 Command + R
的时间,webpack
同样也是提供了那1可选的地头开发服务器,然则它是三个独立的机件,在
webpack 中开展示公布局在此之前须要独自安装它作为项目重视

npm i webpack-dev-server -D

devserver 作为 webpack
配置选项中的壹项,以下是它的部分安顿选项,更加多布置可参考
DevServer

devserver的配置选项 功能描述
contentBase 默认 webpack-dev-server 会为根文件夹提供本地服务器,如果想为另外一个目录下的文件提供本地服务器,应该在这里设置其所在目录(本例设置到 public 目录)
port 设置默认监听端口,如果省略,默认为“8080”
inline 设置为 true,当源文件改变时会自动刷新页面
historyApiFallback 在开发单页应用时非常有用,它依赖于 HTML5 history API,如果设置为 true,所有的跳转将指向 index.html
// webpack.config.js
module.exports = {
    devtool: 'eval-source-map',
    entry:  __dirname + "/app/main.js", 
    output: {
        path: __dirname + "/public",
        filename: "bundle.js"
    },
    devServer: {
        contentBase: "./public", //本地服务器所加载的页面所在的目录
        historyApiFallback: true, //不跳转
        inline: true //实时刷新
    }
}

{
  "name": "webpack_demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack",
    "server": "webpack-dev-server --open"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^3.10.0",
    "webpack-dev-server": "^2.9.7"
  }
}

在终点中输入 npm run server 即可在地头的 8080 端口查看结果

WebPack 运维进度

运营结果

该章节的始末到那里就总体终了了,源码作者早就发到了 GitHub
WebPack_1
上了,有须要的校友可自动下载

End of File

写作进度中出现错误或不妥之处在所难免,希望大家能够予以指正,以防误导越来越多人,最终,要是您以为小编的篇章写的勉强可以,希望可以点一下喜欢关注,为了本身能早日成为简书卓绝作者献上一发助攻吧,多谢!^
^

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图
Copyright @ 2010-2019 美高梅手机版4858 版权所有