2016年JavaScript领域中最受迎接的,大家该如何行使

201捌 年,大家该怎么利用 JavaScript?

2018/03/14 · JavaScript
· 1 评论 ·
Javascript

原稿出处: Tara Z.
Manicsic   译文出处:开源中中原人民共和国   

美高梅开户网址 1

从命令行工具和 webpack 到 TypeScript,Flow
等别的工具,大家无妨来研商一下在 201捌 年该怎么利用 JavaScript。

二〇一八年,包含作者在内的许三个人都在谈论 JavaScript
的乏力。事实上编写
JavaScript
应用程序的措施并从未真的缩小,其它有那个命令行工具完结了大量千斤的劳作,转译(transpiling)变得不那么重大,并且
TypeScript 能够减弱项目错误的发出,那让我们轻便了很多。

注:本博客小说是大家的白皮书“JavaScript 的未来:2018
及远方”的一片段,它提供了有关
JavaScript 的流行分析和展望。

翻译注:那里将 transpiling 译作“转译”,transpiling
是二个英文Computer术语。一般以为转译是壹种奇特的编写翻译,当将一种源代码语言编写翻译成其余一种源代码语言时,就称为转译。文中提到的
TypeScript 能够编写翻译成 JavaScript。

前言
纵然各个框架、库发版之快,但并不会阻止部分人去商讨利用。后天的篇章只怕带给您的是一些前端的名词解释,那么前几天由@谢丽翻译的文章或然会给你另壹番不等的感触。

因个人精力有限,暂停简书的保险,应接我们关心本人的博客园https://www.zhihu.com/people/wei-wei-24-86-36/activities,会不停分享前端、Web开拓相关小说

Webpack
是三个前端能源加载/打包工具。它将遵照模块的注重性关系进展静态分析,然后将那几个模块根据钦点的条条框框变化对应的静态财富。

命令行工具

大繁多库和框架都配备有三个命令行工具,通过输入三个命令,可感到大家运转一些框架项目,以神速创制自个儿期望的事物。这一般包涵2个运转脚本(有时用自动重新加载器),营造脚本,测试结构等等。当大家创立新类型时,那几个工具得以缓慢化解我们多量冗余文件的编辑。让咱们来看看愈来愈多别的的一些命令行工具。

本文从那初步~

微信原著:201陆年JavaScript领域中最受迎接的“歌唱家”们

在代码施行从前,先说一写webpack的基础知识。

Webpack 配置

配置你的 webpack 营造进程并真正清楚你在做哪些,可能是 2017年更令人恐惧的求学曲线之1。幸运的是,他们的基本贡献者之1 Sean
Larkin 奔走在世界各省,为我们提供了很棒的阐述和老大有意思和实惠的教程。

明天游人如织框架不仅为你创造了 webpack
配置文件,乃至将它们填充到您依然或者不须求看的境界。Vue 的 CLI
工具有一个 webpack
专用的模版,为您提供兼职能的
Webpack 设置。为了让你尽管精晓命令行工具提供的内容,以下是 Vue CLI
模板包蕴的剧情:

  • npm run dev: 重要开采体验
    • 用以 Vue 单文件组件的 Webpack + vue-loader
    • 热更新中的状态保持
    • 编译错误时的场馆保持
    • 保留时采纳 ESLint 检查
    • 源文件映射(Source Map)
  • npm run build: 为生产条件图谋好创设
    • 使用 UglifyJS
      v3 最小化
      JavaScript
    • 使用 html-minifier 最小化
      HTML
    • 使用 cssnano 提取全体组件中的
      CSS 并最小化
    • 对静态能源计算 Hash 使之在缓存中长期有效,并自行为生育境遇调换使用那些静态能源UENCOREL 的 index.html
    • 采取 npm run build –report 创设并转移含有流量分析的报告
  • npm run unit: 使用 Jest  在
    JSDOM 中运行单元测试,恐怕在 PhantomJS 中动用
    Karma + Mocha + karma-webpack

    • 测试文件援助 ES20一伍+
    • 简短打桩
  • npm run
    e2e: 使用 Nightwatch 进行端到端测试

    • 自动管理 Selenium 和 chromedriver 注重
    • 自动生成 Selenium 服务器
    • 在多少个浏览器中相互地运转测试
    • 运用八个非凡好的命令行工具:

preact-cli,从另多少个地点支撑着
Webpack 的效果。假如您要求自定义 webpack 配置,只供给创制preact.config.js,它导出1个函数来改变webpack。多量的工具带来了汪洋的便捷性,开辟人员们也在互相帮扶。

若是你以前有编制程序经验,可是一名前端JavaScript开采的初学者,那么一多种的术语和工具轻松招惹混淆。大家不会纠缠于细节的座谈,而是会纵览当前的“JavaScript生态圈”。那应该丰裕你找准方向,开启前端开采之旅。

JavaScript社区的进化正如盛壮之时的骐骥,—日而驰千里,趋势如长江后浪推前浪。

壹、为什要使用WebPack

2016年JavaScript领域中最受迎接的,大家该如何行使。Babel:启用依旧关闭

弄通晓了啊?Babel 听起来像巴比伦(Babylon)。作者都快完蛋了。笔者并从未计划将
Babel 与 贝布ylon
联系在一齐,但有人说过大家大概会遗弃对转译(transpiling)的注重性。在过去几年里,Babel
一向是个大题目,因为大家想要 ECMAScript
提议的富有美好的性状,但又并不想等待浏览器跟上更新。随着 ECMAScript
转向年度小本子公布,浏览器大概会跟上。剔除一些可怜棒的 kangax 包容性图表的
JavaScript 公布是如何的吗?

那个图片的截图不是很清楚,因为本身想展示它们看起来是何等的绿!越来越多关于详细音信,请单击图像下方的链接以进一步查看图表。

美高梅开户网址 2

es陆 的包容性

美高梅开户网址 3

2015+ 的包容性

在第3张图中,左边的石榴红块是编译器(举例es-陆shim,Closure等)和较旧的浏览器(举例Kong 四.1四和IE
1一)。右侧的八个浅橙列是服务器/编译器PJS、JXA、Node 四、DUK 一.八和DUK
2.2。在十分的低的图上,看起来像一头狗并且乱七8糟的感慨号的不得了图形的乙亥革命区域是仅使用Node
6.五+具备灰白条纹的服务器/运维时。左侧灰白方块的组成是编写翻译器/polyfils和IE
1壹。更关键的是,看看那多少个绿的!在最风靡的浏览器中,我们大约都是金棕的。20一7年效果中的唯一玉石白标识是Firefox
52 ES福睿斯 for Shared Memory和Atomics。

从一些角度来看,那里是缘于维基百科的部分浏览器选择情状。

美高梅开户网址 4

好的,关闭Babel只怕会略微麻烦,因为当它达成之时,大家目的在于其能被尽或者多的用户尽也许地访问Babel。想想下大家大概能够摆脱那一个额外的手续,在我们未有使用转译器之时。

器重术语展现为粗体。假使你想跳到能够干活的标准代码库,那么小编早已将小编的一对提出整理成了一个GitHub库。

201陆年曾经过去,20壹7的职业早就张开,你是或不是会顾忌错过一些重大的东西?无须担忧,JS.ORG多年来享受了一篇博文:https://risingstars2016.js.org,为大家回看了二零一八年紧要的方向。

现行反革命的累累网页其实能够看做是作用丰硕的运用,它们持有着复杂的JavaScript代码和一大堆正视包。为了简化开荒的复杂度,前端社区涌现出了多数好的实施方法

谈谈 TypeScript

万1我们在谈 JavaScript,那就不得不谈谈 TypeScript。五 年前从微软办公诞生的
TypeScript 发展到
2017 年,已经卓殊酷了。差不离从不什么样会议在座谈“我们为啥喜欢 TypeScript”,但它为费用带来了新的体会,自然十分受大千世界爱好。对于 TypeScript,不供给赞扬,大家只是探讨开采者在行使它的时候怎么会以为到轻便。

对于想在 JavaScript 中接纳项目标人来说,TypeScript 在语法上是 JavaScript 的超集,为其带来了静态类型。尽管您喜爱那种东西,就会感到这多少个酷。当然,倘诺你看来了 JavaScript
状态核查的新型结果,你会发现实际多数个人都爱不释手。

美高梅开户网址 5

来自 JavaScript 的状态

大家看看 Brian Terlson 是怎么说的:

作为
201四 年为 JavaScript 建议到场类型的人,笔者不感觉类型会在较长期内落成。从专门的学业的角度来说,那是2个无限错综复杂的主题材料。对于TypeScript
用户来讲,选拔 TypeScript 标准自然没有错,不过也有其余一些J
avaScript 超集扶助项目,它们扶助着一些一定首要的用法,比方 Closure
Compiler 和 FLow。这一个工具的一举一动各区别,以致不通晓它们是否留存3个联机的子集(小编不以为有直观的表现)。小编不明确项目的准更像哪1个,作者和别的人会持续进行连锁的实验斟酌切磋,那恐怕是有含义的办事,但决不期望在长期内完成– HashNode AMA with Brian
Terlson

客户端JavaScript是怎么着行事的,为何要运用它?

重大术语:DOM(文书档案对象模型)、JavaScript、async、AJAX

为了编写制定高效的前端代码,你必要对哪些综合运用HTML、CSS和JavaScript成立Web页面有3个主干的理解。

当客户端(日常是浏览器)访问HTML页面时,它会下载它,解析它,然后选用它构造DOM(文书档案对象模型)。JavaScript能够同DOM交互及修改DOM,交互式站点就是那般创制的。那里有3个DOM的主导介绍。

JavaScript是什么包蕴到页面中的?那是另一个错综复杂的主题素材,但它是以script标签发轫的。

JavaScript的施行会阻塞DOM构造。那正是说,施行JavaScript的小时过长会令人认为页面没响应。为了防止那种景况,客户端JavaScript平时都是大气施用异步。(你恐怕据书上说过AJAX,它就表示asynchronous
JavaScript and XML。)

万一你正在创设二个交互式站点,那么您会须要利用JavaScript,你或然会利用这种或另1种艺术管理异步。

前者之巅翻译并整治了那篇博文,以飨读者。

  1. 模块化,让大家能够把复杂的程序细化为小的文书;
  2. 接近于TypeScript那种在JavaScript基础上开始展览的支出语言:使大家能够达成近期版本的JavaScript不可能直接选取的本性,并且之后还是能能装换为JavaScript文件使浏览器能够辨别;
  3. Scss,less等CSS预管理器

TypeScript 喜欢 Flow

在 20一柒年,你大概看看了诸多帖子在讨论 TypeScript

  • Flow 的组合。Flow 是 JavaScript的静态类型检查器。
    通过 Flow 你能够在图片中看出 JavaScript
    的意况,那里面包车型地铁内容包蕴了你感兴趣和不感兴趣的。纵然不少人还并未有耳闻过
    Flow,可是她们相应会对一些状态感兴趣。借使人们在 201八 年学习了越多的
    Flow,那她们就会意识 Minko
    Gechev
    所做的有效性的事:

TypeScript 和 Flow 消除了你的成品中山大学约 1伍% 的 bug!
还感到类型系统绝非用么? 

框架是怎样?作者必要使用trendy.js吗?

重在术语:React、Angular、Ember、Backbone、jQuery、Underscore、Lodash

“框架”这几个词有无数趣味。JavaScript框架的靶子一般是减掉营造立外交关系互式Web页面进程中无谓的办事。从根本上说,框架正是脚手架,设计用来消除3个特定类型的标题。

过多当下盛行的框架都以统一计划用来减轻那样的难点的,“如何成立1个帮助复杂用户交互的单页Web应用,并在前者管理全体的政工逻辑?”单页应用或许SPA是不须求刷新页面包车型客车Web应用,产品的大多数都以当做二个独立的“页面”而存在——回顾下照片墙首页或然Gmail收件箱。

那么该用哪个框架呢?React? Angular?
照旧Ember?以致说您要求框架吗?选用麻痹症的连续信号!

全部这个品种都计较帮你编写越来越好的Web应用程序。对于选用哪位框架,未有科学的答案,固然有,你就应该使用。

如果您是刚刚开首使用JavaScript,那么不行使框架恐怕会更加好一些,尝试选用jQuery创设2个站点,其余的少用或不用。那高速就会变得令人头疼,但您能到位,那会让您驾驭到有的重视的、有关JavaScript工作规律的东西。你还足以采纳jQuery践行好的软件工程准则。

假设你正在开拓三个一定复杂的站点,那么你会发觉框架很有用。当前,Angular、React和Ember都以风靡且明智的选项。Backbone是二个针锋相对非常小的老一套框架;它也切合于广大类型。作者为本文整理的初学者工具包使用了React,但实际上,未有不当的选用。TodoMVC使用分裂的框架达成了同3个清单应用程序,检出它,本身比较一下各样框架。

JavaScript还贫乏繁多别的语言内置的标准库函数,像字符串填充或数组重排。为此,我们常见会选拔像jQuery、Underscore和Lodash这样的库来弥补那种不足。遵照常规,那个库在导入后要分头选择$、引用,因而,假诺你见到1个JavaScript文件中有数不尽比索符号,大致能够一定这是调用了jQuery。

若果您要起来3个新类型,笔者建议采纳React只怕Angular以及Lodash。

JS.OHummerH二G通过比较过去拾二个月里,在Github上日增的星标数,告诉您201陆年的动向。

2、什么是Webpack

Angular 喜欢 TypeScript

你可能注意到在 Angular 文书档案中具备的代码例子就是由 TypeScript
写的。曾经在某些时候,有一种建议,你应有选拔过贰次 JavaScript 恐怕 TypeScript
的手册,可是,看起来 Angular 的心已经动摇了。查看连接 Angular 到 JS
风格的图纸,大家会看到实际有一小部分会被Angular 连接到
ES陆(TypeScript: 3777, ES陆: 39九7)。大家静待它在 201八 对 Angular
的熏陶。

美高梅开户网址 6

来自 JavaScript的状态

至于怎样为您的下1个应用程序选用准确的 JavaScript
框架的片段专家建议,请参阅此白皮书。

早晚,大家的 JavaScript 将要 201捌年相当慢上扬。作为技士,大家喜欢编写和运用那多少个让大家的生存更自在的工具。不幸的是,这有时会促成越来越多的乱7捌糟和太多的挑叁拣4。值得庆幸的是,命令行工具正在帮忙大家减轻部分累赘的劳作,并且
TypeScript 已经满足了那一个对品种错误感到腻烦的开采者。

本人应该编写JavaScript,依然此外的哪些?JavaScript的项目有如何?

重在术语:ES5、ES陆、ES二零一六、CoffeeScript、TypeScript、ClojureScript、Babel、“转译(transpiling)”、“编写翻译(compiling)”、MDN参考

“JavaScript”实际上并不是1门单独的言语。各个浏览器供应商都实现了谐和的JavaScript引擎,由于浏览器和本子之间的反差,JavaScript饱受碎片化之苦。CanIUse.com记录了一些不等同的状态;你也得以查看Mozilla开垦者社会群众体育里的文书档案。

ES陆又称 ES二〇一五/Harmony/ECMAScript6/ECMAScript
20一⑤,是JavaScript规范的新颖版本。它引进了新的语法和效用。胖箭头、ES陆类、当地模块和模板字符串都以这些JavaScript版本的一局部。Treehouse提供了一份不错的ES6入门教程。

即使JavaScript处于1个碎片化的条件,但亦可利用新的言语特色也不易。由此,像Babel那样的工具会把您闪亮的规范JavaScript代码调换到2个同旧平台包容的本子。这一个历程称为转译。那同编写翻译未有太大的差异。使用像Babel这样的工具,你不用太过怀念特定的浏览器是或不是援助您选用的JavaScript性子。

转译工具不只是将ES6JavaScript转变来ES5。还有部分工具得以对JavaScript的变体,如ClojureScript、TypeScript和CoffeeScript,做一样的事情。ClojureScript是Clojure的3个本子,能够编写翻译成JavaScript。TypeScript本质上是JavaScript,但有一个品种系统。CoffeeScript同JavaScript格外像,但有更闪亮的语法;由CoffeeScript创设的许多语法糖都已经被ES六使用,那在相当大程度上显得CoffeeScript不那么有用了。全数那几个都会编译成普通的JavaScript。

那么你应有选拔什么啊?假使您是前端开采的初学者,那么你只怕应该编写ES陆品格的JavaScript。超过一半ES6本性都拿到了各浏览器供应商的普及协助。如若你须要帮助相对较老的平台,那么像Babel那样的工具得以替你将ES陆编写翻译成包容ES5的JavaScript。今后先不要思索闪亮的compile-to-JavaScript选项,如ClojureScript,然则,一旦你有了越来越多的前端开拓经验,那么它们当然值得商量。

在2015年,React是社区之王,Redux在与Flux的战事中力克。那么,何人是201陆年的JavaScript的风行?

WebPack可以用作是模块打包机:它做的事务是,分析你的门类协会,找到JavaScript模块以及别的的部分浏览器不能够一向运转的张开语言(Scss,TypeScript等),并将其包装为方便的格式以供浏览器选拔。

JavaScript 的未来

想要深刻摸底大家在 JavaScript 的上进势头? 不要紧查看大家的最新篇章“201八年 JavaScript 的前途及外国”。

阅读:JavaScript
的未来

1 赞 1 收藏 1
评论

美高梅开户网址 7

如何运用其余人的代码?

第二术语:速龙、commonJS模块、ES6模块、npm、Github

在JavaScript中,代码共享和模块的野史有几许复杂。小编强烈建议你读书Preethi
Kasireddy的稿子“JavaScript模块入门指南”来领会更加多音信。

对于大家来说,术语模块和库基本上是等价的:它们代表大量的自包涵代码,大家能够在温馨的门类中利用及重用。JavaScript模块一般经过node包管理器npm宣布。你能够在npm或GitHub上找寻JavaScript模块。

模块定义(有时称为模块语法)有两种存在竞争关系的点子,主要归纳CommonJS、AMD和ES陆原生模块。CommonJS接纳一种共同的、面向服务器的诀要。相反,英特尔(异步模块定义)允许你利用异步、非阻塞的措施定义和加载模块。CommonJS和AMD都以在JavaScript未有原生支持别的模块或倚靠概念的情事下创办的。

ES陆增添了原生JavaScript模块协助,它既补助CommonJS的阐明式语法,又帮助速龙的异步加载,还有任何部分天性。终于,模块成为今后语言的壹有个别。

在专门的学问中,你很只怕会碰着具备那二种档案的次序的模块。对于新类型,你该应该使用ES六原生模块。创设筑工程具,如webpack(上面会介绍),会拉拉扯扯您在现存项目中利用各种类型的模块。

以下图表比较了Github在过去12个月底增加的星标数量。JS.O帕杰罗G分析了bestof.js.org的等级次序,那是2个与网络平台相关的极品项目标挑选列表。

三、WebPack和Grunt以及居尔p比较有何特点

我需要Node.js吗?

器重术语:Node.js、npm、nvm

Node.js是一款编写服务器端JavaScript的工具。等一下,难道大家研讨的不只是前端JavaScript吗?

鉴于JavaScript模块平时在包装后通过node包管理器npm分享,所以您须求设置Node.js,即便你不会把它用于服务器端开采。在OS
X或基于Linux的系统上,最棒的不二诀假使经过Node版本管理器nvm,那简化了分化Node.js版本的军管。Windows用户应该看下nvm-windows。

1. 201六年最受接待的项目

骨子里Webpack和其余七个并未有太多的可比性,居尔p/Grunt是1种能够优化前端的付出流程的工具,而WebPack是一种模块化的消除方案,然则Webpack的帮助和益处使得Webpack能够替代居尔p/Grunt类的工具。

本人该用什么创设筑工程具?

重在术语:grunt、gulp、bower、browserify、webpack、“热重载(hot
reloading)”、sourcemap

二个script标签接一个script标签地请求将各样JavaScript信赖作为页面包车型客车一部分会相当的慢。因而,大繁多站点都应用所谓的JavaScript
bundles。捆绑进度会得到具有依赖,并把它们“捆绑”在同步,生成1个独立的文件,包括到页面中。依照必要,有些开垦人员还会接纳八个“最小化(minifying)”步骤,将装有不供给的字符从JavaScript代码中去除,而又不更动代码的机能。那足以削减客户端需求下载的数据量。

多少工具还协理诸如热重载及sourcemaps那样的表征,前者会在您保存一个文书时自动在浏览器中更新您的档案的次序,后者提供了多个从捆绑好的JavaScript到其原来格局的照射,简化了调剂职业。

真相上讲,我正好描述的是二个创设进程。不管是还是不是大好些个JavaScript开垦职员都这么描述,你都是将代码编写翻译成三个生育就绪的格式。“前端devops”也许管制创设、布置工具及依赖项的经过成为一项日益复杂的干活。

Grunt、gulp、broccoli、brunch、browserify和webpack都以JavaScript创设筑工程具。比较它们相当不便,因为它们每1个都从事于化解不相同的主题材料。它们中有大多应用了分化的抽象概念来谈谈一样的难题,我们实际是还尚无1个国有的术语库。

听别人说自个儿的经验,开辟职员往往对这么些工具的布置文件不甚精通,因而就在项目里面粘来粘去。下边是自己为初学者库整理的webpack配置文件,供参考:

var webpack = require('webpack');
module.exports = {
    entry: [
        "./app.js"
    ],
    output: {
        path: __ dirname + '/static',
        filename: 'bundle.js'
    },
    module: {
        loaders: [
            { 
                test: /\.js?$/, loader: 'babel-loader', query:{presets:['es2015', 'react']},
                exclude: /node_modules/
            }
        ]
    },
    plugins: []
}

如上,该webpack配置文件提醒webpack完结以下职业:

  • 起步app.js作为入口点;
  • 拍卖以.js结尾的具备文件;
  • 使用babel-loader对它们进行更改,尤其是拍卖ES6转译(所以es20一5query)和JSX(所以react query);
  • 将装有JavaScript文件捆绑成一个文本static/bundle.js。

对于新类型,小编引入webpack。它有很强的适应性,而且能够很好地拍卖具备复杂性正视图的大型项目。

概述

美高梅开户网址 8

Snip20170204_1.png

透过一年中最看好的12个档案的次序,因而可以很好地问询201陆年的Web开采情形,因为您会发掘:

  • 3个UI框架:Vue.JS、React、Angular
    2

  • 新的Node.js包管理器:Yarn

  • 营造桌面应用程序的超越消除方案:Electron

  • 迅猛运行新的React项目标消除方案:Craste React
    App

  • 挪动框架:React
    Native

  • 最著名的CSS工具包:Bootstrap

  • 依靠函数概念的情状管理库:Redux

  • 无敌灵活的图纸库:D3

上述显示了201陆年中,JavaScript表现出了无处不在,功用三种的特色。

Grunt和居尔p的劳作方式是:在3个布署文件中,指明对少数文件进行类似编写翻译,组合,压缩等职分的具体步骤,这几个工具之后能够自行替你成功这个职责。

自个儿如何测试代码?

一言玖鼎术语:Mocha、Jasmine、Chai、Tape、Karma、Selenium、phantomjs

同众多任何品种的编制程序同样,前端JavaScript能够从测试中收入。大很多JavaScript开采人士都表示,他们足足会编写部分测试。

JavaScript缺乏1种内置的框架用于运转测试,因而,开垦职员供给依据外部库。不一样的测试工具致力于难题的不一致方面,那点同JavaScript营造系统尤其像。

Mocha和Jasmine是八个流行的库,有时候称为测试框架,能够协理你编写测试。他们的API13分近似;你讲述应该出现的表现,然后利用断言测试它。

describe('helloWorld()', function(){
   it('should greet me by name', function(){
        // assertions go here
   }); 
});

Mocha实际上并没有放开断言库,由此,大大多开荒职员都会将它同Chai结合使用。它们的断言语法类似:

// Jasmine
expect(helloWorld("Bonnie")).toEqual("Hello, Bonnie");

// Chai
expect(helloWorld("Bonnie")).to.equal("Hello, Bonnie");

为了运维测试,Mocha提供了3个命令行工具,而Jasmine没有。大多开荒职员使用Karma,那是贰个测试实行器,既能够运转Jasmine风格的测试,也能够运作Mocha风格的测试。

那很合乎单元测试;对于基于JavaScript的购并测试,我们要求越多工具。在前者领域,集成测试平时涉及使用1个浏览器实际地渲染和加载页面,模拟用户交互,并检查结果。

Selenium是叁个Web驱动程序,平时能够用来这几个测试。你供给为Selenium配备3个浏览器驱动程序,以便它亦可运行浏览器。PhantomJS是一个所谓的无头浏览器——它运营时不曾图形用户分界面——平时用于测试中。由于它们不须要GUI,所以无头浏览器对自动化测试来讲至极实惠。你大概会意识Sinon有用;它提供了1个仿照服务器,能够用于模拟AJAX请求的响应。

你仍可以设置JavaScript测试同持续集成(CI)系统同步运维,如Jenkins或Travis。

JavaScript测试工具有大量堪称完美的抉择。对于新品类,作者每每接纳Karma和贾斯敏,并采纳PhantomJS作为测试浏览器,但Mocha

  • Chai也是二个没错的选料。

二〇一四年的王者

Vue.JS体系在二〇一九年的GitHub上获得了赶上贰伍,000颗星标,将席卷React和Angular的别的框架甩在身后,1骑绝尘。

十一月揭橥的Veu.JS的版本2,带来了虚拟DOM的性质。

Vue.JS用来大厂商(包罗Alibaba,中华人民共和国最大的电子商务集团)的生产,所以你能够认为它是三个平安的选项。

它曾经有1个特出干练的生态系统,包涵路由(vue-router)和情况管理库(Vuex)。

看来Vue.JS利用了最棒的React(组件方法)和AngularJS(模板是HTML代码巩固的框架性情)。

那些立异确实大大的提升了我们的成本成效,然而选拔它们开垦的文件反复须求实行额外的拍卖才干让浏览器识别,而手动管理又是可怜反锁的,那就为WebPack类的工具的面世提供了急需。

这正是说作者怎么着出手呢?

我整理了一个GitHub库,里面包括3个基本的前端开荒配置:https://github.com/wzxm/react-starter.git。

它使用:

  • React;
  • Babel转译;
  • Webpack构建;
  • ES陆语法(针对React类和模块导出);
  • Karma + Jasmine + PhantomJS测试;

让大家略微详细地研商下。React是大家使用的框架,它让大家得以更自在地创制交互式站点。(你讲述UI,React会为你渲染并拍卖DOM操作。)我们将编写制定符合ES陆专门的学业的JavaScript代码。Webpack会使用Babel将ES陆JavaScript代码转译成包容ES5的JavaScript代码。Webpack还会处理正视和模块导入。最终,大家使用Karma和PhantomJS运维测试,并运用Jasmine库编写那几个测试。

率先,确定保障您有多个可用的npm版本。然后,安装那一个GitHub库的借助,并开端应用:

npm install
webpack

下一场,使用它实行支付,运转:

webpack --watch

那会提示webpack监视项目,并在JavaScript文件变化时再也编写翻译它。想要查看应用程序,就必要运转1个本地服务器。在OS
X或Linux上,使用Python很轻便产生:

python -m SimpleHTTPServer

……你早已筹划好起来了!编辑app.js或Hello.js扩充越多的React组件,并利用npm
test来运维测试。

理所当然,有一个能够干活的早先代码库只是成功的二分一。前端JavaScript开垦世界很复杂,有雅量的工具、术语以及新定义需求上学,同时也有恢宏的标题亟需消除。上述放四三个主旨都很轻巧写满二个博客。希望那篇小说能让您对JavaScript生态圈有局地摸底,能在你学习更加多关于前端开垦的文化时提供一些指导。

最后
对全局指导类的篇章,在笔者眼里还是有必然的佑助,至少让你领悟了本来还有这几个东西,犹如许多创设筑工程具的借助包同样,当你需求了,你能够及时学习并选用它。有新东西出来并不可怕,表达前端社区最少仍旧很活跃,我们挑选入前端坑依然不错的。以温馨的探究去选拔符合自个儿的也是蛮有学问的事情。

2. 前端框架

美高梅开户网址 9

Snip20170204_2.png

“前端框架”那1分拣只怕是201六年JavaScript最累的三个牌行榜,差不离种种月都会油然则生一个竞争者,可是,那有助于了翻新的脚步。

适本地说,在这些项目中夹杂了三种档期的顺序的项目:

  • 完整的框架包蕴了具有机能,能够成立多少个今世的Web应用程序(路由、数据提取、状态管理)。AngularJS、Angular
    2、Ember或Aurelia都属于那一类。

  • 更轻量级的缓慢解决方案专注于UI层,如React、Vue.JS、Inferno,等等。

大家曾经关系了一体化排名第三的Vue.JS,让我们看看别的竞争者。

美高梅开户网址 10

React及其竞争者

React完整排名第壹,前端开拓者未有何人能够忽略React及其充裕的生态系统。

React诸如此类受迎接,它激情了重重其余库,意在接纳最佳的React,未有臃肿,提升在浏览器的天性和创设时间。

Inferno是那一个连串中最受招待的花色,它声称是React最快的代替品。

在大家的排行中,紧跟Inferno之后,Preact也是React的1个不利的代替品。它的生态系统是一对10%熟的,比方有1个具备离线功用的Bolierplates、路由、Compat模块,以便你能够选拔Preact项目中的任何现成React库。

Webpack的做事办法是:把您的门类作为一个完好,通过三个加以的主文件(如:index.js),Webpack将从那几个文件初始找到您的花色的享有重视文件,使用loaders处理它们,最终打包为贰个浏览器可识其他JavaScript文件。

Angular 1和Angular 2

Angular项目曾经拆分为二个存款和储蓄库,因为Angular 贰是Angular
一的一点1滴重写,固然一些概念保持不改变。

Angular
2是用TypeScript编写的,并且动用ES6提供3个当代和绝望的框架。

AngularJS项目是一.x的支行,它在许多档次中依旧选拔,并将持续流行一段时间。

值得一提的是,Ember纵然持有庞大的生态系统,但它的社区并不在前10名。

就此看起来,与其采用“开箱即用”的兼具机能的欧洲经济共同体框架,201六年开拓商更赞成轻量级的方案,并喜爱组成和谐的方案——“点菜”。

在201陆年调味的更轻的章程,并更欣赏组成和煦的解决方案“点菜”。

美高梅开户网址 11

三. Node.js框架

美高梅开户网址 12

Snip20170204_3.png

201陆年,使用以下化解方案创设和配置node.js应用程序从未如此简约:

  • Now

  • Webtask.io

  • Stdlib

像Gomix那样的品种如故降低了Node.js世界的妙法,使得任何人都足以在浏览器中轻便点击几下去编写共享
Node.js代码。

壹经您无法不创设三个Web应用程序,你会挑选哪个框架?

从图中大家得以看看,Webpack 能够将三种静态能源 js、css、less
调换到三个静态文件,减弱了页面的伸手。

Express

当您利用node.js创设Web应用程序时,Express常常被视为事实上的Web服务器。它的法学(二个足以利用中间件包扩大的简要为主)是绝大诸多node.js开辟职员熟知的。

只要实在要把双边进行比较,Webpack的管理速度更快更直接,能打包更加多不相同类别的公文。

Koa

Koa的艺术学接近Express,但它是行使ES6生成器,以制止偶发被叫做回调鬼世界的标题。

接下去大家大致为大家介绍
Webpack如何将八个js文件合并(注意那里只是文件的集结,将要四个写好的js合成2个js文件,以减掉http请求)。

Feathers

Feathers是一个十分灵活的化解方案,创设三个“面向服务”的架构,它是二个很好的符合创立node.js微服务。

安装webpack

Nodal

Nodal框架以目标无状态和布满式服务连接到PostgreSQL数据库。

在设置 Webpack 前,你本地情况亟待支持node.js。安装node.js能够参见node官方文书档案。

Keystone

Keystone是小编所知获得一个管制客户端并运转得最棒的减轻方案之一,以便管理来自MongoDB数据库的内容。管理分界面自动从模型生成,具有全体CRUD操作和小巧的过滤器。

行使如下命令在大局安装webpack。

Sails

Sails是八个全体的MVC框架,受Ruby
on
Rails的启迪(由此名叫Sails!)。它已经存在了相当长日子。它能够与其他类型的数据库(SQL或无SQL)特出专业。

$ npm install webpack -g

Loopback

Loopback是另贰个成熟的框架,内置许多函数,包罗利用令牌和到其它项目标数据库的连接器的验证。

它的刺客级功能是API浏览器效果,允许开拓人士以直观的主意检查有着API端点,并能检查任何用户的令牌。假如你不能够不创设3个API,那纯属是贰个正确的选项。

webpack已经设置到计算机上,今后得以行使webpack命令了。

四. React Boilerplates

美高梅开户网址 13

Snip20170204_4.png

React是一个了不起的UI库,但利用React和今世Web开垦职业流工具必要大量的铺排。那么哪些开端成立3个应用程序呢?

那是React的“Boilerplates”和其他“Starter 基特s”提供的答案:

在类型中应用webpack

Create React App

Twitter通过提供1个称呼Create React
App的轻量级方法来缓慢解决那几个供给,那是叁个万分有利的运营多少个新的React项目。

Dan
Abramov(Redux的成立者,现在为推特(Twitter)务事业人士作)做了二个光辉的职业,在轻松性和功力找到了精确的平衡点。比如,未有花哨的体制消除方案(只是轻易的CSS),未有服务器端渲染,可是具备的方方面面,都很好地打包了,开垦人士的经验非常厉害。

与其竞争者的要害差别是,假如利用Create React
App,它将形成项目的信赖项,全数的法力是暗藏的,你见到的只是你的应用程序代码。您能够每壹天跳级重视关系,它并非只是贰个起源。

动用以下命令在品种根目录下生成package.json文件。

React boilerplate

命名为React
boilerplate怀有您需求的全方位,包涵Redux和一些奇妙的离线功效,利用web
workers才能。

它让开荒职员创设所谓的渐进式Web应用程序(Progressive Web
Applications,PWA):离线运转的Web应用程序,使用一种名叫ServiceWorker的才具,请阅读NicolásBevacqua的稿子。

$ npm init

Next.js

Next.js由Zeit创建,具备可用于创立通用应用程序的服务器端展现效果(或同构应用程序,如小编辈在20一伍年所说),相当于说客户端和劳务器端运行的应用程序使用一样代码。

安装webpack到项目中

五. Mobile

美高梅开户网址 14

Snip20170204_5.png

JavaScript无处不在,你能够行使才干Web开采职员已知的其余本事(HTML、JavaScript、CSS)营造移动应用程序。

将webpack参预到pageage.json配制文件中,使用以下命令:

React Native

行使React
Native,你可以从一样的代码库使用React开拓人士纯熟的定义营造iOS和Android真正的原生移步应用程序。要打听关于创设iOS和Android应用程序的越来越多新闻,请阅读那本教程。

其他依据Cordova的消除方案,凭仗WebView来渲染荧屏,并且不及原生消除方案那么高效。
“3遍编写,处处运维”,那是开拓职员的梦想成真!

$ npm install --save-dev webpack

Ionic

Ionic是“混合”应用程序概念的四驱。在后纽伦堡,它依照Cordova访问活动器械效率。那是1个可怜干练的大型生态系统。

那会儿再看package.json文件,对比package.json刚刚创立时,新扩张了一段代码。

NativeScript

NativeScript意志贯彻与React
Native同样的靶子(使用Web技艺构建真正的移位应用程序)。它有两各类风格:NativeScript
Core和NativeScript + Angular 二。

美高梅开户网址 15

前瞻

在前年仔细关心的三个品种:Weex,四个营造在Vue.JS如上的运动跨平台UI框架。

webpack打包的两种方式

六. Compilers

美高梅开户网址 16

Snip20170204_6.png

作者们在此地商议生成任何语言(或JavaScript的别的变体)的JavaScript的编写翻译器(或“transpilers”)。它们将代码调换为浏览器(或Node.js)能够实践的“标准JavaScript”代码。

比如,编写翻译器允许开采职员使用最新版本的JavaScript(ES陆)编写代码,而无须顾忌浏览器的支撑。

  1. webpack entry<entry> output (命令行)
  2. webpack -config webpack.conf.js (钦赐webpack的安顿文件)

TypeScript

最风靡的调换器是TypeScript,它为Web开荒职员提供了Java和C#开荒职员使用的静态类型。事实上,Angular
2应用TypeScript扩大了越来越多的牵重力。在JavaScript中利用项目有利弊,阅读这个小说,使您本身的见识:

  • 你或然不必要TypeScript:https://medium.com/javascript-scene/you-might-not-need-typescript-or-static-types-aa柒cb670a7柒b#.1pn05vlis

  • TypeScript:缺点和失误的介绍:https://toddmotto.com/typescript-the-missing-introduction

选取命令行打包js

Babel

Babel与Webpack一齐,大致形成编写翻译ES5代码和规范JavaScript中的库(如React(JSX))使用的沙盘的正统。最初创立用于编写翻译ES陆,它产生1个更通用的工具,能够产生其余代码转变,拜三个系列的插件所赐。

1:创造七个js文件

Flow

Flow不是一个编写翻译器,它是二个用以“注释”JavaScript代码的静态类型检查器。基本上在代码库中选取Flow意味着增多注释来叙述期望的花色(点阅读更加多询问使用Flow编写模块)。

它在推特项目的代码源内使用。因为照片墙成为开源世界的重要角色之1(像React、React
Native、Flux、Immutable、Jest等门类),那表示大多。

始建app.js, sum.js,sum.js导出两个加法的函数,app.js使用这么些函数。

CoffeeScript

多年来,CoffeeScript是因为其简单语法(灵感来源Python和Ruby语法),成为最受应接的编写翻译器,但它在201陆年不太流行,繁多开拓职员从CoffeeScript迁移到ES陆与Babel。

// app.js

import {sum} from './sum';
console.log('sum(21, 22)', sum(21, 22));

// sum.js
export function sum(a, b) {
  return a + b;
}

七. Build Tools

美高梅开户网址 17

Snip20170204_7.png

在二零一六年,很难想象三个不曾其余营造进程的Web应用程序。平日须求贰个创设进度来编写翻译模板和优化财富,以便在生产情形中运转Web应用程序。

2:使用webpack命令打包

Webpack

Webpack是用来营造单页应用程序的主要性工具,它与React生态系统一同行使。新颁发的版本2推动了一些催人奋进的增强作用(查看那份介绍)。

在当前目录下利用: webpack app.js bundle.js ; 那里进口是app.js,
输出文件是bundle.js,那样就会看出文件中多出叁个bundle.js文件。

Gulp

Gulp是二个通用的任务运转器,能够用来涉及文件系统的任何类型的自动进度,因而它不是Webpack或Browserify的一贯竞争者。

像Grunt1如既往,居尔p通过聚合专门的学问:你能够需求它裁减和再三再四财富列表,不过它不会像Webpack或Browserify美高梅开户网址 ,那样管理模块化JavaScript本身。

只是,它能够很好地与webpack一齐专业,尽管开垦人士倾向于选择npm脚本。

创设二个html文件运转,引进bundle.js运营,调节台会打字与印刷:sum(二壹, 2二) 4叁 。

Browserify

Browserify是因为其轻松性,受到了node.js开垦人士喜爱。

基本上,它须求多少个node.js包作为输入,并为浏览器生成三个10足的“营造”文件作为出口。可是就好像四个更有见地的工具像Webpack是1个更加好地契合Web应用程序职业流。

动用webapck的布置文件打包(依然地点的八个js文件)

前瞻

201七年的模块捆绑包,重申品质:汇总(rollup)。

它选用ES陆模块与三个名称叫树摇动(Tree
shaking)成效创设捆绑包,只包蕴你在代码中选取的机能,而不是搬运完整的库。

创制一个webpack.conf.js,编写wepack的布局文件

八. Testing Frameworks

美高梅开户网址 18

Snip20170204_8.png

最著名的多个测试框架是Jasmine和Mocha,但多年来的多少个系列在201六年有更加多的带动力:AVA和Jest。

// 配置文件使用commonjs规范

module.exports = {

  // 入口,是一个对象
  entry: {
    app: './app.js'
  },

  // 输出
  output: {
    // 带五位hash值的js
    filename: '[name].[hash:5].js'
  }
}

AVA

AVA,由多产的Sindre
Sorhus创建的重申质量(并行测试)和ES陆。
AVA的语法接近规范测试框架,如Tape和Node-tap。

  1. 在命令行输入:webpack –config
    webpack.conf.js,开采生成了三个app.dd一c陆.js带hash的js文件。将这些js文件引入HTML里面发符合规律输出:sum(2一, 2二)
    4三
  2. 安排文件的命名称叫webpack.config.js,则一向在命令行输入webpack就可以。

Jest

Jest,另三个脸书(推特(Twitter))项目,在过去的几周里拿走了十分大的牵重力。它在React社区中是醒目的,越多的人转账Jest(阅读那篇好玩的事来询问),它或许变为201柒年最风靡的测试框架。

Jest有内置的佳绩的模拟技艺,而别的测试框架常常依赖于像Sinon.JS如此的库。

webapck配合babel打包ES6、7

九. IDE

美高梅开户网址 19

Snip20170204_9.png

有关IDE(Integrated Development
Environment,集成开辟条件),值得一提的是,七个最流行的IDE是运用Web技艺开拓的开源项目。

在等级次序根目录安装bable-loader和babel-core,babel-preset

Visual Studio Code

在大家的结果中,Microsoft依赖Visual Studio
Code迢迢超过。

它提供了三个与TypeScript和node.js的很好的合并。一些开荒职员提到关于开拓进程,诸多谢AMDliSense作用(高亮和电动完结的插花)。

在壹如既往句话中关系“开源”和“微软”不再争持了!

  1. 使用npm init生成二个陈设文件
  2. npm install babel-loader babel-core –save-dev
  3. 新建app.js,index.html,webpack.config.js等文件
  4. 编写webpack.config.js
  5. 安装babel-preset来钦赐编写翻译的本子:npm install babel-preset-env
    –save-dev
  6. 在app.js里面随意写一些ES陆的语法
  7. 使用命令行输入webpack进行编写翻译

Atom

Atom是由Github推动的、并且由Electron构建(像其余一些桌面应用程序,包涵Slack桌面客户端),并非远远落后Visual
Studio
Code。关于Atom的一个妙不可言的事实:它的重大语言是CoffeeScript!

webpack配置文件

十. Static Site Generators

美高梅开户网址 20

Snip20170204_10.png

静态网址生成器(Static site
generators,SSG)是生成一名目很多HTML、.CSS和JavaScript文件的工具,您能够在其余轻松的Web服务器(Apache或NGNX)上安顿,而无需舍近求远,大概设置数据库或别的互连网框架。正如Gatsby网站所说:

就像199伍年那样建立网址。

静态网址有着飞快性、鲁棒性和易维护性。

SSG深受欢迎,因为有多数很好的缓慢解决方案来主持静态网址无偿:

  • Github pages

  • Gitlab pages

  • Netlify

  • Surge

  • Now
    static

// 配置文件使用commonjs规范
module.exports = {

  // 入口,是一个对象
  entry: {
    app: './app.js' // 相对路径
  },

  // 输出
  output: {
    // 带五位hash值的js
    filename: '[name].[hash:8].js'
  },

  // 指定loader
  module: {

    // rules中的每一项是一个规则
    rules:[
      {
        test: /\.js$/, // 值一个正则,符合这些正则的资源会用一个loade来处理
        use: {
          loader: 'babel-loader', // 使用bable-loader来处理
          options: { // 指定参数
            presets: [
              ['babel-preset-env', {
                targets: {
                  browsers: ['> 1%', 'last 2 version'] //具体可以去babel-preset里面查看
                } 
              }]

            ] // 指定哪些语法编译
          }
        },
        exclude: '/node_module/' // 排除在外
      }
    ]
  }
}

Hexo

在201陆年,使用node.js营造的最风靡的SSG是Hexo。它是三个干净的SSG,接近CMS系统,可用于营造二个博客,如Wordpress。它有无数效益,包涵国际化插件。

app.js和编写翻译之后带hash的js

Gatsby

新来的Gatsby是2个老大风趣的消除方案,它从竞争对手横空出世,因为它利用React生态系统来变化静态html文件。事实上,您能够组成React组件,马克down文件和劳务器端渲染使它丰硕有力。

// app.js
let func = () => {};
const num = 30;
let arr = [3, 4, 5, 6];

let newArr = arr.map(item => item * 2); // 将以前数组每一项*2

console.log(newArr);

// ==================//
// 编译之后(直接截取了编译的代码)
"use strict";


var func = function func() {};
var num = 30;
var arr = [3, 4, 5, 6];

var newArr = arr.map(function (item) {
 return item * 2;
}); // 将以前数组每一项*2

console.log(newArr);

2016 总结

固然存在JavaScript疲劳™和戏曲(记住“左键门”),但对于社区来讲,随着像Vue.JS和React
Native品种的起来,以及像Yarn或Creat
React
App的新品类,201陆年照旧不啻为多少个铁汉的年度。

大家直接在批评的档案的次序,201陆年在GitHub获得了吸晴,但确实首要的是开垦者的满足度。所以,若是你想要一个更定性的点子,上Sacha
Greif查看JavaScript检察的结果,它搜集了当先九,000的汇报。


以下是JS.O大切诺基G的年度拾公投择,以及JS.O猎豹CS陆G的主张:

  • Vue.JS:势头强劲,不会终止

  • Electron

  • Create React
    App

  • React
    Native

  • Gatsby

  • Yarn:
    3个飞速,可信和平安的依赖性处理,能够代替npm,点此处领会Node.js包管理器的景色。

  • 渐进式Web应用程序。

  • Node.js微服务使用像Now诸如此类的托管化解方案很轻易铺排。

  • Node.js的演变:最新版本对ES陆语法提供卓越的协理。

  • 还有二个选取是GraphQL:据JS.ORAV4G领会,GraphQL将有大动作。

<recommend
image=””
title=”花菇街前后端分离推行”
link=”;

babel的多个插件:Babel Polyfill 和 贝布el Runtime Transform

视界拓展

QCon是由InfoQ主办的大地一级才干盛会,每年在London、东方之珠、东京、London、多伦多、法国巴黎、苏黎世举办。扫描下图贰维码,精晓愈来愈多新闻。

美高梅开户网址 21

QCon北京2017将于4月16日~二十五日在首都·国家会议大旨进行,精心设计了支撑海量业务的互连网架构、大规模网关系统、微服务实践、急忙前进的容器生态、智能化运转、互联网广告系统举行、大数量实时计算与流管理和经济科技(science and technology)转型与前程等30来个专题,涵盖架构、大数额、云总结、移动、前端、人工智能等火爆领域,将邀约来自谷歌(Google)、照片墙、Alibaba、腾讯、百度、美团点评、爱奇艺等规范互联网集团的技术专家,分享才干领域最新成果。敬请期待。

用来管理局地函数和方法(Genertor,Set,Map,Array.from等未被babel管理,须要地点的多个插件)

前者之巅

「前端之巅」是InfoQ旗下关怀前端才具的垂直社会群众体育,投稿请发邮件到editors@cn.infoq.com,评释“前端之巅投稿”。

美高梅开户网址 22

  1. Babel Polyfill(全局垫片),npm install babel-polyfill –save,
    使用:import “babel-polyfill”;
  2. Babel Runtime Transform(为开采框架希图),npm install
    babel-plugin-transform-runtime –save, npm install babel-runtime
    –save
  3. 新建2个.babelrc来张开安顿

app.js里面新添代码

import "babel-polyfill";
let func = () => {};
const num = 30; 
let arr = [3, 4, 5, 6];
let newArr = arr.map(item => item * 2); // 将以前数组每一项*2

console.log(newArr);
// 需要babel-polyfill
arr.includes(8);

// Genertor 函数
function* func2() {
}

webpack配置

// 配置文件使用commonjs规范
module.exports = {
  // 入口,是一个对象
  entry: {
    app: './app.js' // 相对路径
  },

  // 输出
  output: {
    // 带五位hash值的js
    filename: '[name].[hash:8].js'
  },

  // 指定loader
  module: {

    // rules中的每一项是一个规则
    rules:[
      {
        test: /\.js$/, // 值一个正则,符合这些正则的资源会用一个loade来处理
        use: {
          loader: 'babel-loader', // 使用bable-loader来处理
          options: { // 指定参数

          }
        },
        exclude: '/node_module/' // 排除在外
      }
    ]
  }
}

.babelrc文件配置

{
  "presets": [
    ["babel-preset-env", {
      "targets": {
        "browsers": ["> 1%", "last 2 version"]
      } 
    }] 
  ],
  "plugins": ["transform-runtime"]
}

上述便是本文的全体内容,希望对大家的学习抱有协助,也希望大家多多援救脚本之家。

您或者感兴趣的篇章:

  • webpack打包node.js后端项目标格局
  • 浅谈webpack打包生成的bundle.js文件过大的主题素材
  • webpack
    单独包装钦赐JS文件的秘籍
  • webpack将js打包后的map文件详解
  • webpack打包js文件及布局的兑现格局
  • webpack打包单页面怎样引用的js
  • Vue.js中用webpack合并打包八个零部件并落到实处按需加载

发表评论

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

网站地图xml地图