1. 首页
  2. IT资讯

IT行业变化快,2018年,我们该如何使用 JavaScript?

“u003Cdivu003Eu003Cpu003E从指令行东西和 webpack 到 TypeScript,Flow 等其他东西,咱们无妨来评论一下在 2018 年该怎样运用 JavaScript。u003Cu002Fpu003Eu003Cpu003Eu003Cimg src=”http:u002Fu002Fp9.pstatp.comu002Flargeu002Fpgc-imageu002F152103844464373bc6470fd” img_width=”600″ img_height=”151″ alt=”IT行业变化快,2018年,我们该如何使用 JavaScript?” inline=”0″u003Eu003Cu002Fpu003Eu003Cpu003E上一年,包括我在内的许多人都在议论 JavaScript 的乏力。事实上编写 JavaScript 应用程序的方式并没有真实削减,别的有许多指令行东西完结了许多深重的作业,转译(transpiling)变得不那么重要,而且 TypeScript 能够削减类型过错的发作,这让咱们轻松了不少。u003Cu002Fpu003Eu003Cpu003E注:本博客文章是咱们的白皮书“JavaScript 的未来:2018 及远方”的一部分,它供给了有关 JavaScript 的最新剖析和猜测。u003Cu002Fpu003Eu003Cpu003Eu003Cstrongu003E译者注u003Cu002Fstrongu003E:这儿将 transpiling 译作“转译”,transpiling 是一个英文核算机术语。一般以为转译是一种特别的编译,当将一种源代码言语编译成别的一种源代码言语时,就称为转译。文中提到的 TypeScript 能够编译成 JavaScript。u003Cu002Fpu003Eu003Cpu003Eu003Cstrongu003E指令行东西u003Cu002Fstrongu003Eu003Cu002Fpu003Eu003Cpu003E大多数库和结构都配备有一个指令行东西,经过输入一个指令,能够为咱们发动一些结构项目,以快速创立我期望的东西。这一般包括一个发动脚本(有时用主动从头加载器),构建脚本,测验结构等等。当咱们创立新项目时,这些东西能够减轻咱们许多冗余文件的编写。让咱们来看看更多其他的一些指令行东西。u003Cu002Fpu003Eu003Cpu003Eu003Cstrongu003EWebpack 装备u003Cu002Fstrongu003Eu003Cu002Fpu003Eu003Cpu003E装备你的 webpack 构建过程并真实了解你在做什么,可能是 2017 年更令人害怕的学习曲线之一。走运的是,他们的核心贡献者之一 Sean Larkin 奔波在世界各地,为咱们供给了很棒的讲演和十分风趣和有用的教程。u003Cu002Fpu003Eu003Cpu003E现在许多结构不仅为您创立了 webpack 装备文件,乃至将它们填充到您乃至可能不需要看的境地。Vue 的 CLI 东西有一个 webpack 专用的模板,为您供给全功用的 Webpack 设置。为了让您充沛了解指令行东西供给的内容,以下是 Vue CLI 模板包括的内容:u003Cu002Fpu003Eu003Cul class=” list-paddingleft-2″u003Eu003Cliu003Eu003Cpu003Enpm run dev: 首要开发体会u003Cu002Fpu003Eu003Cu002Fliu003Eu003Cu002Fulu003Eu003Cul class=” list-paddingleft-2″u003Eu003Cliu003Eu003Cpu003E用于 Vue 单文件组件的 Webpack + vue-loaderu003Cu002Fpu003Eu003Cu002Fliu003Eu003Cliu003Eu003Cpu003E热更新中的状况坚持u003Cu002Fpu003Eu003Cu002Fliu003Eu003Cliu003Eu003Cpu003E编译过错时的状况坚持u003Cu002Fpu003Eu003Cu002Fliu003Eu003Cliu003Eu003Cpu003E保存时运用 ESLint 查看u003Cu002Fpu003Eu003Cu002Fliu003Eu003Cliu003Eu003Cpu003E源文件映射(Source Map)u003Cu002Fpu003Eu003Cu002Fliu003Eu003Cu002Fulu003Eu003Cul class=” list-paddingleft-2″u003Eu003Cliu003Eu003Cpu003Enpm run build: 为出产环境准备好构建u003Cu002Fpu003Eu003Cu002Fliu003Eu003Cu002Fulu003Eu003Cul class=” list-paddingleft-2″u003Eu003Cliu003Eu003Cpu003E运用 UglifyJS v3 最小化 JavaScriptu003Cu002Fpu003Eu003Cu002Fliu003Eu003Cliu003Eu003Cpu003E运用 html-minifier 最小化 HTMLu003Cu002Fpu003Eu003Cu002Fliu003Eu003Cliu003Eu003Cpu003E运用 cssnano 提取一切组件中的 CSS 并最小化u003Cu002Fpu003Eu003Cu002Fliu003Eu003Cliu003Eu003Cpu003E对静态资源核算 Hash 使之在缓存中长期有用,并主动为出产环境生成运用这些静态资源 URL 的 index.htmlu003Cu002Fpu003Eu003Cu002Fliu003Eu003Cliu003Eu003Cpu003E运用 npm run build –report 构建并生成含有流量剖析的陈述u003Cu002Fpu003Eu003Cu002Fliu003Eu003Cu002Fulu003Eu003Cul class=” list-paddingleft-2″u003Eu003Cliu003Eu003Cpu003Enpm run unit: 运用 Jest 在 JSDOM 中运转单元测验,或许在 PhantomJS 中运用 Karma + Mocha + karma-webpacku003Cu002Fpu003Eu003Cu002Fliu003Eu003Cu002Fulu003Eu003Cul class=” list-paddingleft-2″u003Eu003Cliu003Eu003Cpu003E测验文件支撑 ES2015+u003Cu002Fpu003Eu003Cu002Fliu003Eu003Cliu003Eu003Cpu003E简略打桩u003Cu002Fpu003Eu003Cu002Fliu003Eu003Cu002Fulu003Eu003Cul class=” list-paddingleft-2″u003Eu003Cliu003Eu003Cpu003Enpm run e2e: 运用 Nightwatch 进行端到端测验u003Cu002Fpu003Eu003Cu002Fliu003Eu003Cu002Fulu003Eu003Cul class=” list-paddingleft-2″u003Eu003Cliu003Eu003Cpu003E主动处理 Selenium 和 chromedriver 依靠u003Cu002Fpu003Eu003Cu002Fliu003Eu003Cliu003Eu003Cpu003E主动生成 Selenium 服务器u003Cu002Fpu003Eu003Cu002Fliu003Eu003Cliu003Eu003Cpu003E在多个浏览器中并行地运转测验u003Cu002Fpu003Eu003Cu002Fliu003Eu003Cliu003Eu003Cpu003E运用一个十分好的指令行东西:u003Cu002Fpu003Eu003Cu002Fliu003Eu003Cu002Fulu003Eu003Cpu003Epreact-cli,从另一个方面支撑着 Webpack 的功用。假如你需要自定义 webpack 装备,只需要创立 preact.config.js,它导出一个函数来改动 webpack。许多的东西带来了许多的快捷性,开发人员们也在彼此协助。u003Cu002Fpu003Eu003Cpu003Eu003Cstrongu003EBabel:启用仍是封闭u003Cu002Fstrongu003Eu003Cu002Fpu003Eu003Cpu003E弄理解了吗?Babel 听起来像巴比伦(Babylon)。我都快溃散了。我并没有企图将 Babel 与 Babylon 联络在一起,但有人说过咱们可能会抛弃对转译(transpiling)的依靠。u003Cu002Fpu003Eu003Cpu003E在过去几年里,Babel 一直是个大问题,由于咱们想要 ECMAScript 提出的一切夸姣的特性,但又并不想等待浏览器跟上更新。跟着 ECMAScript 转向年度小版别发布,浏览器可能会跟上。除掉一些十分棒的 kangax 兼容性图表的 JavaScript 发布是什么样的呢?u003Cu002Fpu003Eu003Cpu003E这些图表的截图不是很明晰,由于我想展现它们看起来是多么的绿!更多有关详细信息,请单击图画下方的链接以进一步查看图表。u003Cu002Fpu003Eu003Cpu003Eu003Cimg src=”http:u002Fu002Fp1.pstatp.comu002Flargeu002Fpgc-imageu002F1521038444943d1eac0a3e6″ img_width=”1080″ img_height=”510″ alt=”IT行业变化快,2018年,我们该如何使用 JavaScript?” inline=”0″u003Eu003Cu002Fpu003Eu003Cpu003Ees6 的兼容性:u003Cu002Fpu003Eu003Cpu003Eu003Cimg src=”http:u002Fu002Fp3.pstatp.comu002Flargeu002Fpgc-imageu002F15210384448379604a3f2b6″ img_width=”1080″ img_height=”232″ alt=”IT行业变化快,2018年,我们该如何使用 JavaScript?” inline=”0″u003Eu003Cu002Fpu003Eu003Cpu003E2016+ 的兼容性:http:u002Fu002Fkangax.github.iou002Fcompat-tableu002Fes2016plusu002Fu003Cu002Fpu003Eu003Cpu003E在第一张图中,左边的赤色块是编译器(例如es-6 shim,Closure等)和较旧的浏览器(例如Kong 4.14和IE 11)。右边的五个赤色列是服务器u002F编译器PJS、JXA、Node 4、DUK 1.8和DUK 2.2。u003Cu002Fpu003Eu003Cpu003E在较低的图上,看起来像一只狗而且杂乱无章的感叹号的糟糕图形的赤色区域是仅运用Node 6.5+具有绿色条纹的服务器u002F运转时。左边赤色方块的构成是编译器u002Fpolyfils和IE 11。更重要的是,看看那些绿的!在最盛行的浏览器中,咱们简直都是绿色的。2017年功用中的仅有赤色标记是Firefox 52 ESR for Shared Memory和Atomics。u003Cu002Fpu003Eu003Cpu003E从一些角度来看,这儿是来自维基百科的一些浏览器运用情况。u003Cu002Fpu003Eu003Cpu003E好的,封闭Babel可能会有点费事,由于当它执行之时,咱们期望其能被尽可能多的用户尽可能地访问Babel。想想下咱们可能能够脱节那个额定的过程,在咱们没有运用转译器之时。u003Cu002Fpu003Eu003Cpu003Eu003Cstrongu003E谈谈 TypeScriptu003Cu002Fstrongu003Eu003Cu002Fpu003Eu003Cpu003E假如咱们在谈 JavaScript,那就不得不谈谈 TypeScript。5 年前从微软办公室诞生的 TypeScript 开展到 2017 年,现已十分酷了。简直没有什么会议在议论“咱们为什么喜爱 TypeScript”,但它为开发带来了新的体会,天然遭到人们喜爱。关于 TypeScript,不需要赞许,咱们仅仅谈谈开发者在运用它的时分为什么会感到轻松。u003Cu002Fpu003Eu003Cpu003E关于想在 JavaScript 中运用类型的人来说,TypeScript 在语法上是 JavaScript 的超集,为其带来了静态类型。假如你喜爱这种东西,就会觉得十分酷。当然,假如你看到了 JavaScript 状况查询的最新结果,你会发现实践上许多人都喜爱。u003Cu002Fpu003Eu003Cpu003E来自 JavaScript 的状况u003Cu002Fpu003Eu003Cpu003E咱们看看 Brian Terlson 是怎样说的:u003Cu002Fpu003E作为 2014 年为 JavaScript 提议参加类型的人,我不以为类型会在较短时间内完结。从规范的角度来说,这是一个极端杂乱的问题。关于TypeScript 用户来说,选用 TypeScript 规范当然无可厚非,不过也有其它一些J avaScript 超集支撑类型,它们支撑着一些适当重要的用法,比如 Closure Compiler 和 FLow。这些东西的行为各不相同,乃至不清楚它们是否存在一个一起的子集(我不以为有直观的体现)。我不确定类型规范更像哪一个,我和其他人会继续进行相关的查询研究,这可能是有意义的作业,但不要期望在短期内完结 – HashNode AMA with Brian Terlsonu003Cpu003Eu003Cstrongu003ETypeScript 喜爱 Flowu003Cu002Fstrongu003Eu003Cu002Fpu003Eu003Cpu003E在 2017 年,你大约看到了许多帖子在评论 TypeScript + Flow 的组合。u003Cu002Fpu003Eu003Cpu003EFlow 是 JavaScript的静态类型查看器。 经过 Flow 你能够在图表中看到 JavaScript 的状况,这儿面的内容包括了你感兴趣和不感兴趣的。虽然许多人还没有听说过 Flow,可是他们应该会对一些状况感兴趣。假如人们在 2018 年学习了更多的 Flow,那他们就会发现 Minko Gechev 所做的有用的事:u003Cu002Fpu003Eu003Cpu003ETypeScript 和 Flow 消除了你的产品中大约 15% 的 bug! 还觉得类型体系没有用么? u003Cu002Fpu003Eu003Cpu003Eu003Cstrongu003EAngular 喜爱 TypeScriptu003Cu002Fstrongu003Eu003Cu002Fpu003Eu003Cpu003E你可能注意到在 Angular 文档中一切的代码例子就是由 TypeScript 写的。曾经在某个时分,有一种建议,你应该选择过一遍 JavaScript 或许 TypeScript 的手册,不过,看起来 Angular 的心现已动摇了。查看衔接 Angular 到 JS 风格的图表,咱们会看到实践上有一小部分会被Angular 衔接到 ES6(TypeScript: 3777, ES6: 3997)。咱们静待它在 2018 对 Angular 的影响。u003Cu002Fpu003Eu003Cpu003E来自 JavaScript的状况u003Cu002Fpu003Eu003Cpu003E有关怎样为您的下一个应用程序选择正确的 JavaScript 结构的一些专家建议,请参阅此白皮书。u003Cu002Fpu003Eu003Cpu003E毫无疑问,咱们的 JavaScript 将在 2018 年快速开展。作为程序员,咱们喜爱编写和运用那些让咱们的日子更轻松的东西。不幸的是,这有时会导致更多的紊乱和太多的选择。值得幸亏的是,指令行东西正在协助咱们减轻一些烦琐的作业,而且 TypeScript 现已满意了那些对类型过错感到厌恶的开发者。u003Cu002Fpu003Eu003Cu002Fdivu003E”

原文始发于:IT行业变化快,2018年,我们该如何使用 JavaScript?

主题测试文章,只做测试使用。发布者:℅傍ㄖ免沦陷dε鬼,转转请注明出处:http://www.cxybcw.com/11372.html

联系我们

13687733322

在线咨询:点击这里给我发消息

邮件:1877088071@qq.com

工作时间:周一至周五,9:30-18:30,节假日休息

QR code