前端工程化

关于前端工程化:大前端2022版全面升级完结

download：大前端2022版全面降级完结大前端：逾越界线的技术大前端是一个宽泛的概念，它波及到多个技术畛域和平台。传统意义上，前端指的是网站和应用程序中用户能够看到和与之交互的局部。然而，随着挪动技术的倒退，前端技术曾经扩大到了挪动应用程序、桌面应用程序和物联网等畛域，这就是大前端。大前端的演变历程在过来的几年里，前端技术始终在迅速倒退。随着 HTML5 和 CSS3 的遍及，前端开发者取得了更多的自由度和创造力。同时，JavaScript 也变得更加弱小，当初能够用于构建残缺的应用程序，而不仅仅是简略的网页。随着挪动设施的遍及，前端开发者的工作范畴也扩大到了挪动利用程序开发。React Native 和 Flutter 是两个风行的跨平台开发框架，它们使得前端开发者能够应用雷同的技能开发 iOS 和 Android 应用程序。物联网是另一个须要前端技术的畛域。当初，前端开发者能够应用 JavaScript 管制嵌入式设施，并构建物联网应用程序。例如，应用 Raspberry Pi 和 Arduino 等设施能够构建智能家居零碎、传感器网络和机器人等。大前端的技术栈大前端的技术栈十分宽泛，涵盖了多个畛域。以下是一些罕用的技术：前端开发前端开发包含 HTML、CSS 和 JavaScript，这些技术用于创立网站和应用程序的用户界面。React、Vue 和 Angular 是风行的 JavaScript 框架，它们能够帮忙前端开发者组织代码并进步开发效率。挪动利用程序开发挪动利用程序开发须要对 iOS 和 Android 等平台有深刻的理解。React Native 和 Flutter 是两个跨平台开发框架，它们能够帮忙前端开发者应用雷同的技能在多个平台上构建应用程序。物联网开发物联网开发须要前端开发者相熟嵌入式设施和无线通信技术。Node.js 能够用于管制嵌入式设施，而 MQTT 和 CoAP 等协定能够用于设施之间的通信。大前端的将来随着新技术的涌现，大前端将持续扩大其技术栈和利用范畴。WebAssembly 是一个新兴的技术，它容许应用 C 和 C++ 等语言编写高性

关于前端工程化:React组件库实践React-Typescript-Less-Rollup-Storybook

背景原先在做低代码平台的时候，刚好有搭载React组件库的需要，所以就搞了一套通用的React组件库模版。目前通过这套模板也搭建过好几个组件库。为了让这个模板更洁净和通用，我把所有和低代码相干的代码都剔除了，只保留最纯正的react组件库所须要的代码，并且同步到了github：react-standard-components。技术栈技术栈：React + Typescript + Less + Rollup + Storybook 组件库用Rollup.js构建，目前反对2种format：umd、esm。目前次要的应用形式还是CDN和es module，所以就没构建cjs格局的bundle。款式用style inject形式解决，所以不存在独自的css产物。引入组件时也不须要额定引入.css文件，间接引入组件bundle即可。反对alias，我发现很多react组件库相干的文章或者仓库，其所提供的相干配置都不反对alias，但个人感觉alias是能晋升开发体验的，所以特地提一下。默认别名有："@/*": ["src/*"]，可自行批改。须要留神的是Storybook有本人的配置在.storybook/main.js，如果要改的话，这里storybook的webpack配置也须要改。介绍RollupRollup.js 是一个 JavaScript 模块打包器，能够将多个模块打包成单个文件，以便于在浏览器中应用。与其余打包器相比，Rollup.js 的独特之处在于它反对 ES6 模块语法，并能将其转换成实用于浏览器的代码，同时还可进行 tree shaking，即只打包应用到的代码，不打包未应用的代码，从而减小打包后文件的体积。 Rollup.js 的另一大劣势是反对插件机制，能够通过插件扩大其性能。例如，能够应用插件将 CSS 文件打包进 JavaScript 文件中，或者应用插件将 TypeScript 转换成 JavaScript。 Rollup.js 的应用也非常简单。首先，须要在我的项目中装置 Rollup.js，并创立一个配置文件，指定入口文件和输入文件的门路，以及须要应用的插件。而后，在命令行中执行打包命令，即可生成打包后的文件。 Rollup.js 是一个功能强大、易于应用的 JavaScript 模块打包器，实用于各种规模的我的项目，能够帮忙开发者进步代码的性能和可维护性。 TypescriptTypeScript是一种开源的编程语言，它是JavaScript的一个超集，由Microsoft开发和保护。它增加了动态类型检查和其余语言个性，以进步JavaScript代码的可读性、可维护性和可扩展性。与JavaScript相比，TypeScript提供了更好的类型反对，这意味着开发人员能够在编码时发现并解决类型相干的谬误。此外，TypeScript还反对类、接口、泛型、命名空间等常见的面向对象编程个性，这些个性能够使代码更加模块化和可重用。 TypeScript还具备一些高级性能，例如枚举、元组、穿插类型、联结类型等，这些性能能够在编写大型应用程序时进步代码的可读性和可维护性。 TypeScript能够应用任何古代的JavaScript库和框架，因为它是JavaScript的超集，能够编译成纯JavaScript并在任何反对JavaScript的浏览器或运行时环境中运行。 TypeScript是一种功能强大、可扩大的编程语言，它提供了更好的类型反对和面向对象编程个性，能够帮忙开发人员编写更可读、可保护和可扩大的JavaScript代码。 LessLess是一种基于CSS的预处理器，它能够帮忙开发人员更加高效地编写CSS代码。Less应用一种相似于CSS的语法，同时减少了一些额定的个性，如嵌套规定、变量、混合等，使得CSS的编写更加简洁、易读、易保护。通过应用Less，开发人员能够更加灵便地组织和治理CSS代码，同时也能够进步开发效率。 Less能够通过两种形式应用：一种是将Less编译为CSS，而后在网页中引入CSS文件；另一种是在网页中间接引入Less，而后通过JavaScript动静地生成CSS代码。这两种形式都有各自的优缺点，开发人员能够依据本人的需要和习惯进行抉择。 Less还有一些其余的个性，如函数、运算符、条件语句等，这些个性能够让开发人员更加灵便地解决CSS代码。同时，Less还反对插件机制，能够通过插件来扩大Less的性能。 StorybookStorybook 是一个为 React、Vue、Angular 等各种前端框架提供 UI 组件开发环境的工具，能够帮忙开发者以独立的形式开发、测试和展现 UI 组件，进步开发效率和可复用性。 Storybook 的次要性能是将 UI 组件与其不同状态下的展现成果以故事（Story）的模式出现进去，不便开发者进行交互式开发和调试。开发者能够在 Storybook 中创立不同的故事，每个故事对应一个特定的组件状态，例如不同的 props、不同的交互等等，并在 Storybook 中展现进去，不便开发者进行测试和交互式开发。除了展现组件之外，Storybook 还提供了各种插件和工具，帮忙开发者进行疾速开发和调试。例如，能够应用插件将 UI 组件文档化，或者应用插件将组件库公布到 NPM 中。 ...

关于前端工程化:helmicro-模块联邦新革命实战预告

hel-micro git：https://github.com/tnfe/hel （你的小星星是咱们开源的最大能源） bilibili 模块联邦分享内容预报在线案例体验：https://codesandbox.io/s/hel-... （main文件批改版本号即拉取不同版本的代码） why 背景模块联邦是一个最近两年诞生的一门新技术，它的平凡之处是在放弃以后前端开发模块化、组件化、工程化的高效率体系下，容许模块独立开发、独立部署，通过 CDN 间接共享，从而挣脱npm包体无奈动静更新的枷锁，从而推动整个前端界开发和运行体验回升到一个新高度。而隔离性强的微容器 + 灵便度更高的微模块联合起来做微前端架构必将成为支流，微模块技术目前有以编译时插件注入的 webpack 5 module federation、vite-plugin-federation，运行时注入的 hel-micro，而 hel-micro 对编译时插件类技术将会是降维打击，hel-micro 以js为基建做近程模块散发体系，而非打包工具插件，将彻底辞别工具链绑定这个致命问题，意味着你无论是 webpack 2 3 4 vite parcel or 其余任何体系，都能够享受模块联邦带来的免构建、热更新、动静共享劣势. 分享工夫

关于前端工程化:在-Web-应用的运行时实现多分支并存和切换

背景一般来说，SaaS 服务商提供的是标准化的产品服务，体现的是所有客户的共性需要。然而，局部客户（尤其是大客户），会提出性能、UI 等方面的定制需要。针对这些定制需要，大体上有两个解决方案。第一个计划是提供应用程序 SDK，由客户的开发团队实现整个定制利用的开发和部署，SaaS 服务商提供必要的技术支持即可。此计划要求客户的开发团队具备较强的 IT 业余能力。第二个计划则是由 SaaS 服务商的开发团队在 SaaS 利用的根底上进行二次开发，并部署。此计划次要面向 IT 业余能力较弱，或者仅需在 SaaS 利用的根底上进行大量定制的客户。然而，要反对这种定制形式，相当于要求 SaaS 服务商在同一个利用中，针对不同的客户运行不同分支的代码。要达到这个目标，应用程序的架构也要进行相应的革新。本文次要讲述革新的计划及其代码实现。计划概览对于前后端拆散的我的项目来说，通过构建，最终会生成 html、js、css 三种代码文件。以基于 Vue.js 框架的我的项目为例，其构建进去的 index.html，内容与上面的代码类似： <!DOCTYPE html><html><head> <meta charset="utf-8"> <link href="https://cdn.my-app.net/sample/assets/css/chunk-0c7134a2.11fa7980.css" rel="prefetch"> <link href="https://cdn.my-app.net/sample/assets/js/chunk-0c7134a2.02a43289.js" rel="prefetch"> <link href="https://cdn.my-app.net/sample/assets/css/app.2dd9bc59.css" rel="preload" as="style"> <link href="https://cdn.my-app.net/sample/assets/js/vendors~app.f1dba939.js" rel="preload" as="script"> <link href="https://cdn.my-app.net/sample/assets/js/app.f7eb55ca.js" rel="preload" as="script"> <link href="https://cdn.my-app.net/sample/assets/css/app.2dd9bc59.css" rel="stylesheet"> </head> <body> <div id="app"></div> <script src="https://cdn.my-app.net/sample/assets/js/vendors~app.f1dba939.js"></script> <script src="https://cdn.my-app.net/sample/assets/js/app.f7eb55ca.js"></script> </body> </html>实际上，index.html 只是拜访入口，次要作用就是加载 css 和 js 资源。换句话说：任何的 html 页面，只有加载了上述 css 和 js 资源，都能够运行这个利用。既然如此，只有做一个利用入口页，并依据客户配置加载相应代码分支构建进去的 css 和 js 资源即可。整体流程如下图所示：构建计划入口页要加载对应分支的 css 和 js 资源，首先须要一个资源列表。咱们能够在构建流程减少一个步骤，把 js 和 css 的援用提取到一个资源目录文件（index-assets.json）中： const fs = require('fs');const content = fs.readFileSync('./dist/index.html', 'utf-8');// 匹配 html 中的 js 或 css 援用标签const assetTags = content.match(/<(?:link|script).*?>/gi) || [];let result = [];assetTags.forEach((assetTag) => { const asset = { tagName: '', attrs: {} }; // 解析标签名 if (/<(\w+)/.test(assetTag)) { asset.tagName = RegExp.$1; } // 解析属性 const reAttrs = /\s(\w+)=["']?([^\s<>'"]+)/gi; let attr; while ((attr = reAttrs.exec(assetTag)) !== null) { asset.attrs[attr[1]] = attr[2]; } result.push(asset);});// 移除 preload 的资源，并把 prefetch 的资源放到 result 的最初面const prefetches = [];for (let i = 0, item; i < result.length;) { item = result[i]; if (item.tagName === 'link') { if (item.attrs.rel === 'preload') { result.splice(i, 1); continue; } else if (item.attrs.rel === 'prefetch') { prefetches.push(result.splice(i, 1)[0]); continue; } } i++;}result = result.concat(prefetches);fs.writeFileSync( './dist/index-assets.json', JSON.stringify({ list: result }), 'utf-8');执行脚本后，就会生成资源目录文件，其内容为： ...

关于前端工程化:大前端2022版全面升级完结无密内置文档资料

download：大前端2022版全面降级完结无密内置文档资料FutureTask源码深度剖析在JDK的FutureTask当中会使用到一个工具LockSupport，在正式介绍FutureTask之前咱们先熟悉一下这个工具。LockSupport次要是用于阻塞和唤醒线程的，它次要是通过包装UnSafe类，通过UnSafe类当中的方法进行实现的，他底层的方法是通过依赖JVM实现的。在LockSupport当中次要有以下三个方法： unpark(Thread thread))方法，这个方法可能给线程thread发放一个许可证，你可能通过多次调用这个方法给线程发放许可证，每次调用都会给线程发放一个许可证，然而这个许可证不能够进行累计，也就是说一个线程能够具备的最大的许可证的个数是1一个。 park()方法，这个线程会生产调用这个方法的线程一个许可证，因为线程的默认许可证的个数是0，如果调用一次那么许可证的数目就变成-1，当许可证的数目小于0的时候线程就会阻塞，因此如果线程从来没用调用unpark方法的话，那么在调用这个方法的时候会阻塞，如果线程在调用park方法之前，有线程调用unpark(thread)方法，给这个线程发放一个许可证的话，那么调用park方法就不会阻塞。 parkNanos(long nanos)方法，同park方法一样，nanos示意最长阻塞超时工夫，超时后park方法将主动返回，如果调用这个方法的线程有许可证的话也不会阻塞。 import java.util.concurrent.TimeUnit;import java.util.concurrent.locks.LockSupport; public class Demo { public static void main(String[] args) throws InterruptedException { Thread thread = new Thread(() -> { LockSupport.park(); // 没有许可证阻塞住这个线程 try { TimeUnit.SECONDS.sleep(1); } catch (InterruptedException e) { e.printStackTrace(); } System.out.println("阻塞实现");});thread.start();TimeUnit.SECONDS.sleep(2);LockSupport.unpark(thread); //给线程 thread 发放一个许可证System.out.println("线程启动");}} 复制代码下面代码的执行后果线程启动阻塞实现复制代码从下面代码咱们可能知道LockSupport.park()可能阻塞一个线程，因为如果没有阻塞的话必定会先打印阻塞实现，因为打印这句话的线程只休眠一秒，主线程休眠两秒。在源代码当中你可能会遇到UNSAFE.compareAndSwapXXX的代码，这行代码次要是进行原子交换操作CAS，比如：UNSAFE.compareAndSwapInt(this, stateOffset, NEW, CANCELLED)))复制代码下面的代码次要是将this对象当中的内存偏移地址为stateOffset的对象拿进去与NEW进行比较，如果等于NEW那就将这个值设置为CANCELLED，这整个操作是原子的（因为可能多个线程同时调用这个函数，因此需要保障操作是原子的），如果操作胜利返回true反之返回false。如果你目前不是很理解也没关系，只需要知道它是将对象this的内存偏移为stateOffset的值替换为CANCELLED就行，如果这个操作胜利返回true，不胜利返回false。 FutureTask回顾咱们首先来回顾一下FutureTask的编程步骤：写一个类实现Callable接口。 @FunctionalInterfacepublic interface Callable<V> { /** * Computes a result, or throws an exception if unable to do so. * * @return computed result * @throws Exception if unable to compute a result */V call() throws Exception;}复制代码实现接口就实现call即可，可能看到这个函数是有返回值的，而FutureTask返回给咱们的值就是这个函数的返回值。 ...

关于前端工程化:超详细一次搞定Eslint-Prettier-husky-lintstaged前端代码工作流

咱们应用热门构建工具vite创立我的项目，并抉择react + ts模板。对于Eslint + Prettier + husky + lint-staged配置同样实用于webpack、Vue创立的我的项目，稍有不同的中央下文会提到，请释怀食用。 1、应用vite创立我的项目yarn create vite输出我的项目名并抉择 react + ts success Installed "create-vite@3.0.0" with binaries: - create-vite - cva✔ Project name: … my-app✔ Select a framework: › react✔ Select a variant: › react-tsDone. Now run: cd my-app yarn yarn dev2、装置Eslintyarn add -D eslint3、初始化配置Eslintnpm init @eslint/config或者 npx exlint --init3.1、抉择模式：选查看语法并发现问题 ? How would you like to use ESLint? … To check syntax only❯ To check syntax and find problems To check syntax, find problems, and enforce code style3.2、抉择模块化语法：选JavaScript modules ...

关于前端工程化:体系课吃透前端工程化大厂级实战项目以战带练MKW无密

download：吃透前端工程化，大厂级实战我的项目以战带练复制下哉ZY：https://www.97yrbl.com/t-1383.html @Componentpublic class RedisUtil { public static RedisUtil util; public RedisUtil(@Autowired JedisPool jedisPool) { this.jedisPool = jedisPool; RedisUtil.util = this; } public static RedisUtil getInstance(){ return util; } @Autowired private JedisPool jedisPool; /** * 向Redis中存值，永恒无效 */ public String set(String key, String value) { Jedis jedis = null; try { jedis = jedisPool.getResource(); return jedis.set(key, value); } catch (Exception e) { return "0"; } finally { jedis.close(); } } /** * 依据传入Key获取指定Value */ public String get(String key) { Jedis jedis = null; String value; try { jedis = jedisPool.getResource(); value = jedis.get(key); } catch (Exception e) { return "0"; } finally { jedis.close(); } return value; } /** * 校验Key值是否存在 */ public Boolean exists(String key) { Jedis jedis = null; try { jedis = jedisPool.getResource(); return jedis.exists(key); } catch (Exception e) { return false; } finally { jedis.close(); } } /** * 删除指定Key-Value */ public Long del(String key) { Jedis jedis = null; try { jedis = jedisPool.getResource(); return jedis.del(key); } catch (Exception e) { return 0L; } finally { jedis.close(); } } /** * 分布式锁 * @param key * @param value * @param time 锁的超时工夫，单位：秒 * * @return 获取锁胜利返回"OK"，失败返回null */ public String getDistributedLock(String key,String value,int time){ Jedis jedis = null; String ret = ""; try { jedis = jedisPool.getResource(); ret = jedis.set(key, value, new SetParams().nx().ex(time)); return ret; } catch (Exception e) { return null; } finally { jedis.close(); } } public void pub(){ jedisPool.getResource().publish("test","msg"); } }

关于前端工程化:吃透前端工程化大厂级实战项目以战带练一起无mi

前端工程化download：https://www.sisuoit.com/2764.... 课成下崽链接：https://www.sisuoit.com/2764.html最晚期写前端代码时,往往一个页面就是一个文件，HTML/CSS/JS全副写在一起，起初晓得应该把结构层、体现层和行为层拆散；再起初随着工程复杂化，产生的诸多问题，比方：如何进行高效的多人合作？如何保障我的项目的可维护性？如何进步我的项目的开发效率？前端工程化思维就在这时利用而生。所谓前端工程化，我认为就是将前端我的项目当成一项系统工程进行剖析、组织和构建从而达到我的项目构造清晰、分工明确、团队配合默契、开发效率进步的目标。前端模块化模板化是在文件层面上，对代码和资源的拆分。就是将一个大文件拆分成相互依赖的小文件，再进行对立的拼装和加载。那具体什么是模块化呢，举一个简略的例子，咱们要写一个实现A性能的JS代码，这个性能在我的项目其余地位也须要用到，那么咱们就能够把这个性能看成一个模块采纳肯定的形式进行模块化编写，既能实现复用还能够分而治之，同理在写款式的时候，如果咱们须要某种非凡的款式，会在很多中央利用，那么咱们也能够采纳肯定的形式进行CSS的模块化。具体说来，JS模块化计划很多有AMD/CommonJS/UMD/ES6 Module等，CSS模块化开发大多是在less、sass、stylus等预处理器的import/mixin个性反对下实现的。模块化不难理解，重点是要学习相干的技术并且灵活运用。前端组件化组件化是在设计层面上，对于UI的拆分。组件化将页面视为一个容器，页面上各个独立局部例如：头部、导航、焦点图、侧边栏、底部等视为独立组件，不同的页面依据内容的须要，去盛放相干组件即可组成残缺的页面。组件具备独立性，因而组件与组件之间能够自由组合；当不须要某个组件，或者想要替换组件时，能够整个目录删除/替换。前端自动化“简略反复的工作交给机器来做”，自动化也就是有很多自动化工具（glup、webpack）代替咱们来实现，例如继续集成、自动化构建、自动化部署、自动化测试等等。之后的文章中作具体介绍前端规范化在我的项目布局初期制订的好坏对于前期的开发有肯定影响。包含的标准有：目录构造的制订、编码标准、前后端接口标准、文档标准、组件治理、代码包治理（SVN、Git）、commit提交代码备注形容标准、定期codeReview、视觉图标标准.......总之：这些概念在软件工程里都是很根底的常识，次要是前端倒退快，需要大，变动灵便，才从简略的前端页面倒退成前端工程化，开发人员还是须要一直的学习，逆水行舟。

关于前端工程化:前端工程化打造企业通用脚手架

前言转载自搜狐-前端工程化-打造企业通用脚手架随着前端工程化的概念越来越深刻FEer心，前端开发过程的技术选型、代码标准、构建公布等流程的规范化、标准化是须要工具来保驾护航的，而不是每次都对反复工作进行手动复制粘贴。脚手架则可作为工程化的辅助工具，从很大水平上为前端研发提效。脚手架是什么？那脚手架是什么呢？在以往工作中，咱们可能须要先做如下操作能力开始编写业务代码：技术选型初始化我的项目，抉择包管理工具，装置依赖编写根底配置项配置本地服务，启动我的项目开始编码随着Vue/React的衰亡，咱们能够借助官网提供的脚手架vue-cli或create-react-app在命令行中通过抉择或输出来按咱们的要求和爱好疾速生成我的项目。它们能让咱们专一于代码，而不是构建工具。脚手架能力然而这些脚手架是针对于具体语言（Vue/React）的，而在咱们理论工作中不同BU针对不同端（PC、Wap、小程序...）所采纳的技术栈也可能不同，往往特定端采纳的技术栈在肯定水平上都能够复用的到其余相似我的项目中。咱们更冀望能在命令行通过几个命令和抉择、输出构建出不同端不同技术栈的我的项目。上述只是新建我的项目的例子，前端开发过程中不止于此，个别有如下场景：创立我的项目+集成通用代码。我的项目模板中蕴含大量通用代码，比方通用工具办法、通用款式、通用申请库解决HTTP申请、外部组件库、埋点监控...Git操作。个别须要手动在Gitlab中创立仓库、解决代码抵触、近程代码同步、创立版本、公布打Tag...等操作。CICD。业务代码编写实现后，还须要对其进行构建打包、上传服务器、域名绑定、辨别测试正式环境、反对回滚...等继续集成、继续部署操作。为什么不必自动化构建工具个别状况下，咱们会采纳Jenkins、Gitlab CI、Webhooks等进行自动化构建，为什么还须要脚手架？因为这些自动化构建工具都是在服务端执行的，在云端就无奈笼罩研发同学本地的性能，比方上述创立我的项目、本地Git操作等；并且这些自动化工具定制过程须要开发插件，前端同学对语言和实现须要肯定学习和工夫老本，前端同学也更冀望只应用JavaScript就能实现这些性能。脚手架外围价值综上，前端脚手架存在意义重大。脚手架的外围指标是晋升前端研发整个流程的效力。自动化。防止我的项目反复代码拷贝删改的场景；将我的项目周期内的Git操作自动化。标准化。疾速依据模板创立我的项目；提供CICD能力。数据化。通过对脚手架本身埋点统计，将耗时量化，造成直观比照。往往各个公司对于自动化和标准化的局部性能Git操作、CICD都有实现一套欠缺的相似于代码公布管理系统，帮忙咱们在Gitlab上治理我的项目，并提供继续集成、继续部署的能力。更有甚者，针对小程序的我的项目也会对其进行代码公布治理，将其规范化。咱们可能就只须要思考创立我的项目+集成通用代码常见痛点的解决方案（疾速生成页面并配置路由...）配置（eslint、tsconfig、prettier...）提效工具（拷贝各种文件）插件（解决webpack构建流程中的某个问题...）...上面则介绍咱们在公司外部基于这些场景所做的尝试。应用脚手架首先在终端通过focus create projectName命令新建一个我的项目。其中focus示意主命令，create示意command，projectName示意command的param。而后依据终端交互去抉择和输出最终生成我的项目。咱们为各个BU、各个端、各个技术栈提供不同模板我的项目，于此同时，每个同学都能将小组内的我的项目积淀并提炼成一个模板我的项目，并按肯定标准集成到脚手架中，反哺整个BU。 @focus/cli架构如下架构图，采纳Lerna做我的项目的管理工具，目前babel、vue-cli、create-react-app大型项目均采纳Lerna进行治理。它的劣势在于：大幅缩小反复操作。多个Package时的本地link、单元测试、代码提交、代码公布，能够通过Lerna一键操作。晋升操作的标准化。多个Package时的公布版本和相互依赖能够通过Lerna放弃一致性。在@focus/cli脚手架中，依据性能进行拆分： @focus/cli寄存脚手架次要性能 focus create projectName拉取模板我的项目focus add material新建物料，能够是一个package、page、component...粒度可大可小focus cache革除缓存、配置文件信息、长期寄存的模板focus domain拷贝配置文件focus upgrade更新脚手架版本，也有主动询问更新机制@focus/eslint-config-focus-fe寄存组内对立的eslint规定也可通过focus add material新建子Package实现特定性能...依赖项概览一个脚手架外围性能须要依赖以下根底库去做撑持。 chalk：控制台字符款式commander：node.js命令行接口的残缺解决方案fs-extra：加强的根底文件操作库inquirer：实现命令行之间的交互ora：优雅终端Spinner期待动画axios：联合Gitlab API获取仓库列表、Tags...download-git-repo：从Github/Gitlab中拉取仓库代码consolidate ：模板引擎整合库。次要应用ejs实现模板字符替换ncp ：像cp -r一样拷贝目录、文件metalsmith ：可插入的动态网站生成器；例如获取到依据用户自定义的输出或抉择配合ejs渲染变量后的最终内容后，通过它做插入批改。semver ：获取库的无效版本号ini ：一个用于节点的ini格局解析器和序列化器。次要是对配置做编码和解码。jscodeshift ：能够解析文件将代码从AST-to-AST。例如新建一个页面后须要在routes.ts中新建一份路由。采纳Typescript编码，应用babel编译。除了tsc之外，babel7也能编译typescript代码了，这是两个团队单干一年的后果。然而babel因为单文件编译的特点，做不了和tsc的多文件类型编译一样的成果，有几个个性不反对（次要是 namespace 的跨文件合并、导出非 const 的值），不过影响不大，整体是可用的。babel 做代码编译，还是须要用 tsc 来进行类型查看，独自执行 tsc --noEmit 即可。援用自为什么说用 babel 编译 typescript 是更好的抉择{ "scripts": { "dev": "npx babel src -d lib -w -x \".ts, .tsx\"", "build": "npx babel src -d lib -x \".ts, .tsx\"", "lint": "eslint src/**/*.ts --ignore-pattern src/types/*", "typeCheck": "tsc --noEmit" }, }在pre-commit中须要先npm run lint && npm run typeCheck再build最初能力提交代码。 ...

关于前端工程化:记一次在老掉牙的Vue2项目中引入TypeScript和组合式Api的艰辛历程

原由现有的一个我的项目2年前创立的，随着工夫流逝，代码量曾经暴增到了将近上万个文件，然而工程化曾经缓缓到了不可保护的状态，想给他来一次大换血，然而侵入式代码配置太多了……，最终以一种斗争的形式引入了TypeScript、组合式Api、vueuse，晋升了我的项目的工程化标准水平，整个过程让我颇有感概，记录一下。先配置TypeScript相干的一些库的装置和配置因为webpack的版本还是3.6，尝试数次降级到4、5都因为大量的配置侵入性代码的大量批改工作放弃了，所以就间接找了上面这些库 npm i -D ts-loader@3.5.0 tslint@6.1.3 tslint-loader@3.6.0 fork-ts-checker-webpack-plugin@3.1.1接下来就是改webpack的配置了，批改main.js文件为main.ts,并在文件的第一行增加// @ts-nocheck让TS疏忽查看此文件，在webpack.base.config.js的入口中相应的改为main.ts在webpack.base.config.js的resolve中的extensions中减少.ts和.tsx,alias规定中减少一条'vue$': 'vue/dist/vue.esm.js'在webpack.base.config.js中减少plugins选项增加fork-ts-checker-webpack-plugin，将ts check的工作放到独自的过程中进行，缩小开发服务器启动工夫在 webpack.base.config.js文件的rules中减少两条配置和fork-ts-checker-webpack-plugin的插件配置 { test: /\.ts$/, exclude: /node_modules/, enforce: 'pre', loader: 'tslint-loader'},{ test: /\.tsx?$/, loader: 'ts-loader', exclude: /node_modules/, options: { appendTsSuffixTo: [/\.vue$/], transpileOnly: true // disable type checker - we will use it in fork plugin }},,// ...plugins: [new ForkTsCheckerWebpackPlugin()], // 在独立过程中解决ts-checker，缩短webpack服务冷启动、热更新工夫 https://github.com/TypeStrong/ts-loader#faster-builds根目录中减少tsconfig.json文件补充相应配置，src目录下新增vue-shim.d.ts申明文件 tsconfig.json { "exclude": ["node_modules", "static", "dist"], "compilerOptions": { "strict": true, "module": "esnext", "outDir": "dist", "target": "es5", "allowJs": true, "jsx": "preserve", "resolveJsonModule": true, "downlevelIteration": true, "importHelpers": true, "noImplicitAny": true, "allowSyntheticDefaultImports": true, "moduleResolution": "node", "isolatedModules": false, "experimentalDecorators": true, "emitDecoratorMetadata": true, "lib": ["dom", "es5", "es6", "es7", "dom.iterable", "es2015.promise"], "sourceMap": true, "baseUrl": ".", "paths": { "@/*": ["src/*"], }, "pretty": true }, "include": ["./src/**/*", "typings/**/*.d.ts"]}vue-shim.d.ts ...

关于前端工程化:Bit-共享代码

Think in ComponentBit是组件驱动架构，基于组件的古代利用开发。在Bit的世界里，所有皆组件。组件能够组合成其余组件，最终组成一个利用APP，即APP也是组件的一种。这为咱们开发提供一个新的思路：咱们构建能够整合成不同利用的组件，而不是构建蕴含组件的利用。 Bit帮咱们构建模块化、巩固的、可测试、可复用的代码。 Bit Cloud是组件的云托管服务。它为开发人员和团队提供端到端的解决方案，用于托管、组织、检索、应用、更新和合作解决组件。 Bit劣势以组件架构的思维帮忙咱们构建模块化、巩固的、可测试、可复用的代码。从现有代码构造中拆散组件，无需更改构造，或保护新的我的项目。可更改依赖组件，并创立本人的版本独立治理，无需担心净化其它环境。初始化Bit工作区装置BVM & BitBVM是Bit版本管理工具，雷同NVM // node版本12.22.0以上npm i -g @teambit/bvm执行bvm -h测验是否装置胜利，若揭示bvm命令不可用，须要设置环境变量： # MacOs Bashecho 'export PATH=$HOME/bin:$PATH' >> ~/.bashrc && source ~/.bashrc# zshecho 'export PATH=$HOME/bin:$PATH' >> ~/.zshrc && source ~/.zshrc# windowssetx path "%path%;%LocalAppData%\.bvm"装置最新版bit： bvm install执行bit -h测验是否装置胜利，若揭示bit命令不可用，须要按上述流程设置一下环境变量。 bit new命令初始化工作区实用于新建我的项目$ bit new <env> <project>$ cd <project>$ bit installbit init命令初始化工作区实用于已有我的项目先初始化环境$ cd <project>$ bit init --harmony手动配置开发环境以react环境为例，批改workspace.jsonc文件： "teambit.workspace/variants": { "*": { "teambit.react/react": { } }}装置必要的peer依赖$ bit install react --type peer$ bit install react-dom --type peer初始化Git须要将workspace.jsonc和.bitmap 上传到Git。 ...

关于前端工程化:后端视野学-Webpack-文武双全

大家好，我是小菜。一个心愿可能成为吹着牛X谈架构的男人！如果你也想成为我想成为的人，不然点个关注做个伴，让小菜不再孤独！本文次要介绍 Webpack 应用如有须要，能够参考如有帮忙，不忘点赞 ❥ 微信公众号已开启，小菜良记，没关注的同学们记得关注哦！前端认知挺多人对前端开发是存在肯定的误会的，感觉会点 H5 + C3 + JS 就等于会前端开发，但近几年前后端拆散的模式逐步流行起来，就阐明前端早已没有之前那么简略。站在我这个后端的视角上倒感觉，前端是个武官，后端是个武将，不能说做到能文能武，但起码求武的同时不能不识一丁，退一两步来说，以后端实习妹子遇到 Bug 束手无措的时候，你这伪境前端若能出手相助~那在她人眼中你就是一位 '架着七彩祥云而来的盖世英雄~' 如果说你会 Bootstrap 加上 Layui，那么就说你会前端，难免会被人拍死在沙滩上~ 实际上的前端开发是由以下几个模块组成：模块化（js 的模块化，css 的模块化，资源的模块化）组件化（复用现有的 UI 构造，款式，行为）规范化（目录构造的划分、编码规范化、接口规范化、文档规范化、Git分支治理）自动化（自动化构建、主动部署、自动化测试）与后端一模一样，该有的模块都有。说到工程化，在后端开发中存在支流的解决方案有 Maven 工程和 Gradle 工程。前端工程化解决方案也有 webpack 和 vite。那么就进入咱们明天的正题，走进 Webpack Webpack一、概念认知实质上，webpack 是一个用于古代 JavaScript 应用程序的动态模块打包工具。当 webpack 解决应用程序时，它会在外部从一个或多个入口点构建一个依赖图，而后将你的我的项目中所需的每一个模块组合成一个或多个 bundles，它们均为动态资源，用来展现你的内容。以上内容摘于官网，官里官气的。上面咱们简略概括一下概念总结：webpack 是前端我的项目工程化的具体解决方案性能总结：提供了敌对的前端模块化开发的反对提供了代码压缩混同、解决浏览器兼容Js、以及性能优化等弱小性能长处总结：进步了前端开发效率和我的项目的可维护性二、根本应用实际出真知！咱们间接应用来增强意识。首先咱们须要创立一个空白目录，而后在空白目录中执行 npm init -y 来初始化包治理配置文件 package.json 能够简略了解为这个 package.json 就相当于 maven 工程中的 pom.xml 文件在 Maven 工程中咱们通常上都是把源代码放在 src 目录底下，该 webpack 工程相似，因而咱们下一步便是在该目录下创立 src 目录，继而创立两个文件 index.html (首页) 和 index.js （脚本文件） ...

关于前端工程化:全网独发立马就能复制粘贴的轻量级前端工程化解决方案

对于gh-frameworkgh-framework旨在解决vue2环境下(思维可用于任何框架我的项目，不局限于vue2)的前端工程化问题，它将封装vue我的项目中罕用的工具库和配置文件并将其可移植化，例如axios、constants(常量)、directives(指令)、services(数据申请层)、config(配置文件)、mixin(全局混入)、utils(工具集)、context(上下文)。本计划自己已在5+我的项目上利用，包含一个大型前端我的项目。 github地址（示例代码）：https://github.com/cong1223/gh-framework 个性高度封装：高度封装我的项目常用工具和配置，不写反复代码。疾速移植化：封装一次，其余类型我的项目可复制粘贴，疾速聚拢反复代码，依据业务需要小局部批改即可，如果后端返回数据格式统一，那么services都不须要批改即可利用。不具备破坏性：新我的项目如果想尝试这套解决方案，那么能够移植次计划，并且对你原先的我的项目不具备破坏性，能够同时兼容。疾速开发体验：一次封装，永恒劳碌，辞别繁琐的导入/导出，this.万物。适用人群对前端工程化具备强烈学习趣味的初中级前端程序员；前端我的项目中表演captain角色的程序员；疾速交付型守业程序员；兼职接单程序员；我的项目构造介绍疏忽了vue我的项目根本我的项目构造文件 |-- node_mudules|-- public|-- src |-- assets // 动态资源文件夹 |-- config // 配置文件文件夹 |-- const // 常量配置文件夹 |-- framework // gh-framework 文件夹 |-- directives // 全局指令文件夹 |-- mixin // 全局mixin混入文件夹 |-- plugins // framework 外围工具集的配置入口 |-- utils // 全局工具集文件夹 |-- ui // 全局通用ui组件文件夹 |-- config.js // 文件名映射配置文件(重要) |-- index.js // 导出为vue能装置的framework插件（封装为install函数） |-- services // 数据申请层文件夹|-- .browserslistrc|-- .eslintrc.js|-- .gitignore|-- babel.config.js|-- package.json|-- README.md|-- yarn.lockframeworkframework文件夹就是gh-framework的核心思想所在，高度聚拢我的项目公共代码，应用变得能够疾速移植化，一个我的项目做完了，能够立马复制framework文件夹到另外一个新的我的项目，惟一不同的就是业务代码局部。此文件夹能够依据本人的业务需要持续扩大其余通用逻辑，封装办法参考directives、utils等。 directives全局指令封装集文件夹，将我的项目中罕用指令对立治理，全局装置。文件夹我的项目构造如下： |-- directives |-- debounce.js // 避免按钮在短时间内被屡次点击，应用防抖函数限度规定工夫内只能点击一次 |-- loadmore.js // element-ui下拉框下拉更多 |-- draggable.js // 实现一个拖拽指令，可在页面可视区域任意拖拽元素 |-- copy.js // 复制粘贴指令 |-- emoji.js // 不能输出表情和特殊字符，只能输出数字或字母等 |-- lazyload.js // 实现一个图片懒加载指令，只加载浏览器可见区域的图片 |-- longpress.js // 实现长按，用户须要按下并按住按钮几秒钟，触发相应的事件 |-- permission.js // 权限指令，对须要权限判断的 Dom 进行显示暗藏 |-- watermark.js // 给整个页面增加背景水印 |-- // 更多其余指令... |-- index.js // 对立进口以上更多通用指令请在示例我的项目中查看获取debounce.js ...

关于前端工程化:翻译篇-ES-模块预加载和完整性

翻译篇 - ES 模块预加载和完整性 翻译篇 - ES 模块预加载和完整性生产环境中模块的优化模块预加载模块预加载例子：Polyfilling 模块预加载完整性限度号召一起口头JSPM Generator - 模块预加载生成器参考社交信息 / Social Links: 生产环境中模块的优化当在生产环境中应用ES模块时，目前有两种次要的性能优化要利用-代码拆分和预加载。代码拆分优化可用于打包器（如 esbuild 或 RollupJS）中的原生 ES 模块。代码拆分确保对于任何两个总是被一起加载的模块，它们将始终被内联到同一个模块文件中，作为网络优化的块模块（或者甚至在可能的状况下，会被内联到入口模块自身中）。而后预加载解决了模块依赖图中模块按援用程序加载的问题 - 模块仅在动态导入图中的每个模块都加载后才执行，模块仅在其父模块加载后才加载。参考：实操探索之ESM引入顶级await前后模块的执行程序模块预加载ES 模块的预加载在浏览器中如下写法： <link rel="modulepreload" href="..."/> 当它首次在 Chrome 中公布时，Google Developers 2017 更新中有一篇对于它的精彩文章。倡议尽可能为所有深度依赖项注入 modulepreload 标签，以便齐全打消模块加载的提早老本，这同时也是是动态预加载的次要益处。【应用 modulepreload 的另一个次要益处是，它是目前应用“integrity”属性反对所有加载模块齐全完整性的惟一机制。】（不太明确,等我查找材料）比方app.js加载dependency.js加载library.js，咱们能够这样写： <link rel="modulepreload" href="/src/app.js" integrity="sha384-Oe38ELlp8iio2hRyQiz2P4Drqc+ztA7jb7lONj7H3Cq+W88bloPxoZzuk6bHBHZv"/><link rel="modulepreload" href="/src/dependency.js" integrity="sha384-kjKb2aJJUT956WSU7Z0EF9DZyHy9gdvPOvIWbcEGATXKYxJfkEVOcuP1q20GT2LO"/><link rel="modulepreload" href="/src/library.js" integrity="sha384-Fwh0dF5ROSVrdd/vJOvq0pT4R6RLZOOvf6k+ijkAyUtwCP7B0E3qHy8wbot/ivfO"/><script type="module" src="/src/app.js"></script>因为预加载导致 app.js、dependency.js 和 library.js 当初立刻并行加载，因而模块提早加载被打消，【并且通过所有脚本的完整性，咱们能够齐全爱护模块执行环境。】（不太明确,等我查找材料）模块预加载例子：代码： index.html: <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> </head><body> <script src="./index.js" type="module"></script></body></html>index.js: import './init.js'import {a, Person, obj, b} from './a.js'console.log(a, Person, obj, b)console.log('index')init.js: ...

关于前端工程化:git钩子与自动化部署

webhook定义Webhooks allow you to build or set up integrations, such as GitHub Apps , which subscribe to certain events on GitHub.com. When one of those events is triggered, we'll send a HTTP POST payload to the webhook's configured URL. Webhooks can be used to update an external issue tracker, trigger CI builds, update a backup mirror, or even deploy to your production server. You're only limited by your imagination.留神要害语句，当咱们触发一个事件（比方git push）的时候，github会给我配置的url发一个post申请，并携带一些参数主动部署过程这次咱们玩的正规一点 ...

关于前端工程化:git钩子与自动化部署

关于前端工程化:构建高质量的前端工程

在过来，与大多数工程师一样，我认为前端代码的设计程度大多与工程师的能力有间接关系。但随着接手了几个多人合作的大型前端我的项目，我开始意识到，这种认知对短生命周期的小型我的项目可能实用，但对真正的大型项目，仅靠晋升工程师品质有时并不能间接晋升代码的品质。本文将联合本人的一些理论教训，来论述本人的一个观点：构建大型高质量前端工程，正当的代码束缚与正确的团队运行机制可能更为重要。什么是高质量的工程代码？高质量的工程代码，并不等价于性能最优，技术最新，复用性最强的技术选型。回顾几年前的前端畛域：JQuery 时代，尽管要手动操作 DOM，但其实在那时， Google Closure 和 Ext.js 团队就曾经提供了残缺的组件化概念，甚至 Ext.js 还提供了组件冒泡这样的翻新事件机制。那时用 Zepto 保护的代码，编码速度甚至比当初写一些 React 我的项目还要快。不同的技术只是工具，怎么用工具，能把工具用到什么水平，最终取决于开发者本身，所以高质量的工程代码，更多应该从业务和工程的角度思考问题，而非技术选型。举个例子，当整个公司都在应用 React 开发时，尽管咱们晓得 Vue 应用可能会更简略便捷，但咱们肯定不会去用，因为这个时候，尽管看起来写代码更简略了，但其他人在 React 方向积淀的教训，你无奈复用，额定还须要整个团队去学习一套全新的技术，这样的工程设计，在这个背景下，显然是不合理的。 Thenewstack 做过 2019 年的开发者数据统计，开发者 32% 的工夫用于业务开发，19% 的工夫在保护代码，也就是工程师真正能投入到研发中的工夫也只有工作工夫的一半。对于开发者来说，这个时候通过正当的代码设计，晋升代码的可扩展性，可维护性，升高开发和保护代码的工夫，才是最强的诉求。所以，高质量的工程代码应该是联合业务与团队状况，真正可能晋升研发效率，升高我的项目保护老本的代码。谁决定了工程代码的品质？这里能够用木桶实践来类比：木桶中的水位，不取决于最高的木板，而取决于最低的木板。同理，前端工程的品质，不取决于团队的均匀能力，而取决于团队教训较少的技术同学的能力。在工作压力比拟大的状况下，这些同学因为经验不足，短期又要实现需要，所以很多时候，并没有思考过工程上的问题，而是间接面向实现性能编程，基本上咱们当初面对的难以保护的代码，都是在这种条件下产生的。咱们当然能够寄希望于教训较少的同学通过一直的成长来晋升我的项目的工程质量，但实际下来，这并不可行。起因在于，工程能力的积攒须要大量的编码教训，短少实践经验的问题并不是短期就可能迅速解决的，任何好的工程师都是在一直犯错学习的过程中成长起来的。同时，工程开发过程中很可能会遭逢人员变动，一个团队的成员不肯能永远全部都是能力很强的。那么咱们就须要换一个策略来保障咱们的代码品质，咱们能够换个角度思考：是否能够通过一些规定，流程，编码上的束缚，让编码能力不同的工程师，尽量写出品质绝对较高的一致性代码。通过束缚晋升工程质量束缚让事件变得更简略工作没有束缚，工作中咱们就难以造成共识，也无奈判断工作做的好与坏。写代码也是一样的，没有束缚，那么咱们也无奈判断代码是否正当。在风行的库和框架中，其实到处都是束缚的影子，这里拿 Redux 和 React 的设计来举例: Redux 给出了繁多数据源，State 只读，应用纯函数来执行批改这三个根本准则，同时要求通过 Action 的形式触发Reducer 的执行，这是 Redux 的束缚；React 也给出了单向数据流这样的束缚概念。框架之所以是可能复用，可能失去推广，就是因为它们进行了封装，仅仅提供无限的束缚能力供大家应用，这样大家能力造成统一的理念，编写相互可能读得懂的代码。了解了这一点，咱们再来看业务工程的代码，实际上要进步开发效率和扩展性，无非也是要提供正当的束缚。工程代码的束缚，更多带有肯定的工程属性，如：规定雷同的申请地址只容许在 API 层呈现一次（我的项目接口数目多，可缩小代码冗余）不应用超过 100 行以上的 Hook 代码（强化逻辑拆分，防止适度简单的逻辑）在复用性和可维护性上做抉择时，优先选择可维护性（防止谬误封装，封装代码中耦合大量逻辑判断）业务代码正文覆盖率必须超过 10%（晋升代码可读性，不便自动化生成文档）我的项目中跨组件通信必须通过 Redux （升高组件传值代码的团队了解老本）雷同性能的 npm 包不容许装置多个（防止无用依赖装置，造成保护成本增加）这些业务的束缚，并不等同于 Eslint，不同的业务对代码的要求有可能千差万别，所以业务上的束缚，须要研发人员充沛的沟通交流，碰撞探讨，以及坚决执行。不同团队的同学，可能探讨出的后果齐全不同，但束缚的论断是什么自身不重要，重要的是造成统一的开发共识。通过机制实现束缚的落地束缚自身并不难制订，对于工程侧的设计，工程师通过探讨比拟容易造成博奕后的论断。但机制的落地是绝对艰难的一环。这里分享几个可执行的保障机制： CodeReview（每次CR，除了对业务进行逻辑剖析，也须要将是否遵循束缚作为审核的一环）通过工具主动生成局部代码（比方应用脚手架生成工程代码中的某个模块，相似 AngularCLI 中 ng g component header 这样的指令，就能够帮你束缚组件创立的代码构造）配置化生成代码（通过配置，生成逻辑或者表单代码，建设配置项规范）零代码 / PaaS 平台（通过平台生成代码，间接将用户与编码隔离，由平台保障生成代码的品质）负责人机制（束缚落地间接与绩效相关联，成为跟进明确指标）积淀文档（通过文档，积淀束缚机制）通过这样的一些机制，保障束缚无效的落地，那么咱们就能够抹平团队成员技术能力的差别，造成一致性的编码格调。尽管这种束缚下的代码并不一定是最优雅的代码，但至多工程质量不会差。所以这里我认为，束缚实际上帮忙咱们保障的是工程质量的上限，那么接着咱们来谈如何通过技术创新，晋升工程质量的下限。 ...

关于前端工程化:前端工程化上21

技术是为了解决问题存在的以前那种写demo套模板，曾经远远不能满足咱们当初开发要求了，所以就有了前端工程化的概念。既然说了技术是为了解决问题存在的，前端工程化也不例外。问题：想应用es6+新个性，然而浏览器不兼容想要应用less,sass,PostCss加强css个性，然而运行环境不能间接反对想要模块化的形式进步我的项目可维护性，然而运行环境不能间接反对部署前须要手动压缩代码及资源文件部署过程须要手动上传代码到服务器多人协同开发，无奈硬性对立大家代码格调，从仓库pull代码品质无奈保障局部性能开发时须要期待后端服务接口提前完成次要解决的问题：工程化的体现：所有以提高效率，降低成本，质量保证为目标的伎俩都属于工程化。所有反复的工作都应该被工程化。创立我的项目：创立我的项目构造创立特定类型文件编码：格式化代码校验代码格调编译/构建/打包预览/测试： web Server/MockLive Reloading/HMRSource Map提交： Git HooksLint-staged继续集成部署： CI/CD主动公布工程化不是某个工具

关于前端工程化:如何提升前端基建的效能价值

写在后面上一篇如何掂量工具平台的效力价值？推导出了一种度量模型，通过具体的数据指标来掂量效力价值，让外部工具/平台的价值也能看得见、说得清那么，对于正在做或者将要做的工具平台，如何进一步晋升其效力价值呢？一.效力价值有哪些影响因素？首先，工具的要害指标是解决理论问题：工具总是为解决问题而生的选定指标问题之后，接着通过工具化、平台化等主动/半自动的伎俩来尝试解决，并通过效率和体验两方面的晋升体现出解决方案的效力价值：效力价值 = 效率价值 * 体验因子进一步细化：工具效率 = 问题规模 / 操作工夫工具效率 = （不必该工具解决所需的）工夫老本 / （用该工具解决所需的）工夫老本工具体验 = 易用水平 * 稳固水平因而，工具的效力价值取决于 4 个因素：问题规模操作工夫易用性稳定性晋升工具效力就是想方法增大分子、减小分母，即晋升问题规模、易用性、稳定性，升高操作工夫二.如何晋升问题规模？对于选定的指标问题，其规模通常是固定的，所以关键在于如何抉择指标价值最高的问题：问题的指标价值 = 指标用户量 * 需要频率 * 单次的价值少数状况下，咱们偏向于抉择指标用户量更大的问题，因为解决一个普遍存在的问题要比解决只有小局部用户才会遇到的非凡问题更有意义然而，需要频率与单价对指标价值的影响却不那么不言而喻：其中：首选高频高价：十分难得的需要，如果有，优先满足不做低频高价：此类需要不值得做高频高价、低频高价并重：大多数需要都是这两类，抉择也都集中在这里在高频高价与低频高价之间，产品经理的个别策略是：高频抓用户，低频做利润也就是说，后期先通过满足高频高价的需要取得大量用户，中后期再将低频高价的需要思考进来：先利用高频高价的需要抓用户，因为高频场景和用户互动的机会多，而高价的轻决策场景能够升高用户进入门槛，容易拉新、引流；再用低频高价的需要做利润，因为单价高了，能够切分的蛋糕才大。之所以采取这样的先后秩序，是因为必须有海量用户做根底，低频需要的总量才足够大。三.如何升高操作工夫？当然，如果有显著的待优化项，应该尽快去做，先把工具本身的效率晋升到相当高的水准，缩小用户期待工具运行实现的工夫但如果工具自身在耗时上曾经没有太大的优化空间，此时就须要将眼光从部分的工具中移出来，放眼全局思考整体优化：面向过程的视角：流程上，是否缩小一些中间环节，简化工作流面向对象的视角：模式上，是否缩小参加其中的相干角色，缩小人与工具、工具与工具、工具与人之间的交互，缩小一些两头产物流程上，甚至合作模式上的改革通常有机会颠覆先前解决问题的要害门路，绕过既有工具的效率瓶颈，从而大幅升高操作工夫四.如何晋升易用性？工具型产品的第一要义是用户会用，让用户至多会用，能力体现产品的价值易用性要求产品性能尽可能地合乎用户心智（至多要保障外围性能的易用性），简化交互，升高用户上手应用的学习老本：从用户心智向产品性能做映射，极致的易用是合乎直觉，上手即用那么，首先要明确用户心智，做法非常简单：通知用户，这个工具能给你解决什么具体问题。接着（在产品性能不那么合乎直觉的阶段）先教会用户怎么用，性能疏导、老手教程/视频、帮忙文档等都是不错的办法，旨在晋升易用性，让用户先用起来。同时依据用户实在反馈一直优化应用体验，放大产品性能与用户心智之间的差距，使之最终合乎直觉：心智累赘小（学习成本低）交互敌对UI 好看外围性能流程顺畅除了让产品性能向用户心智聚拢外，还有一种非常规思路是造就用户心智（即扭转用户直觉，使之合乎产品性能），多呈现在颠覆式翻新的场景，必须扭转用户积重难返的直觉能力真正提高效率五.如何晋升稳定性？从用户心智向产品性能做映射，极致的稳固是齐全信赖，从不狐疑工具会出问题与易用性相比，稳定性是主观而明确的，单从技术角度就能在很大水平上确保稳定性，例如：升高 crash 率：继续关注 top 解体，及时修复影响范畴较大的缩小 bug 数：继续察看 bug 增长趋势，疾速迭代修复，收敛功能性问题缩小操作失败次数：记录失败操作，剖析改善常见误操作，同时反向丰盛性能其中，值得注意是记录失败操作，以搜寻性能为例，失败操作包含：搜寻服务出错搜寻无后果搜寻后果与预期不符（后果没有帮忙）从技术上看，后两类并不属于操作失败，但同样值得关注，因为无后果的搜寻通常意味着语义化/含糊搜寻性能不够欠缺，或者相干内容有缺失，这些信息对于丰盛产品性能很有帮忙。同理，不合乎用户预期的搜寻后果也是一种有价值的负反馈，有助于发现问题，改善用户应用体验六.如何晋升用户量？当工具的效率和体验都达标后，最要害的问题是如何晋升用户量，放大工具的价值与其它产品相比，工具型产品的难点在于：可替代性强用户不晓得（有工具能够用）用户粘性差，容易散失强的不可替代性是决定性因素，作为惟一选项天然不用思考用户量的问题，例如小程序开发者工具如果不具备强的不可替代性，就要通过其它伎俩来减少用户的替换老本，罕用的策略有场景化经营、社区经营、内容经营等场景化经营将工具与应用场景严密关联起来，造就用户的应用习惯：做工具型产品肯定要时刻诘问用户在什么样的场景下会想到关上你的产品，这个具体场景就是所有经营的根底围绕一个外围场景，充沛满足要害需要，成为该场景下的最优解决方案，从而解决用户不晓得的问题另一方面，场景化的舒适提醒有助于晋升产品的温度，让用户感触到兽性关心，而不只是凉飕飕的工具社区经营增强产品与用户，以及用户与用户的分割，建设社区是进步用户粘性的无效伎俩，例如： ...

关于前端工程化:前端工程化中的自动化部署

前言在前端工程化中，前端开发人员终于在一直的进步本人的位置，再也不是简略的切图仔了。当然，随之而来的就是咱们的工作内容变得越来越多，变得越来越繁琐。不仅要一直的学习新的前端技术内容，而且还要独立保护前端的部署工作。因而，如何能疾速的进行工程化内容的部署，就是一件十分有价值的事件。疾速部署对于前端的部署来说，其实次要就是将编译后的工程化我的项目（以vue来说就是将npm run build的dist文件夹）间接部署到对应的服务器的指定目录下即可，其余的内容咱们临时不在此处做过多的解说。因而，目前个别会应用SFTP工具（如：FileZilla：https://www.filezilla.cn/，Cyberduck：https://cyberduck.io/）来上传构建好的前端代码到服务器。这种形式尽管也是比拟快的，然而每次要本人进行打包编译=》压缩=》关上对应的工具=》找到对应的门路，手动的将相干的文件上传到对应的服务中。并且为了部署到不同的环境中（个别我的项目开发包含：dev开发环境、test测试环境、uat测试环境、pro测试环境等）还要反复的进行屡次的重复性操作。这种形式不仅繁琐，而且还升高了咱们程序员的身份。所以咱们须要用自动化部署来代替手动，这样一方面能够进步部署效率，另一方面开发人员能够少做一些他们认为的无用功。筹备工作话不多说，说干就干。首先，咱们先梳理一下个别的部署流程，次要是先将本地的工程化代码进行打包编译=>通过ssh登录到服务器=>将本地编译的代码上传到服务器指定的门路中，具体流程如下：因而，通过代码实现自动化部署脚本，次要须要实现如下，上面以vue我的项目来为工程项目来具体解说：实现本地代码编译；可间接配置npm run build即可进行相干的打包实现本地编译的代码压缩3.通过ssh连贯近程服务器查看对应的近程部署门路是否存在，不存在须要创立上传本地的压缩包解压上传的压缩包删除上传的压缩包敞开ssh连贯删除本地的压缩包具体实现为了在可能实现以上的几个步骤，咱们须要引入一些依赖包，以此来进行相干步骤的操作和日志的打印输出chalk：格式化输入日志的插件，能够通过配置不同的色彩来显示不同的日志打印。https://www.npmjs.com/package/chalkchild_process：nodejs的一个子过程模块，能够用来创立一个子过程，并执行一些工作，能够间接在js外面调用shell命令。http://nodejs.cn/api/child_process.htmljszip：一个轻量级的zip压缩库,用于压缩编译后的脚本。https://stuk.github.io/jszip/ssh2：用于通过ssh来连贯近程服务器的插件。https://github.com/mscdex/ssh2大抵流程如下：根本配置为了可能将部署相干的内容，如服务器信息，部署的门路等内容进行对立的治理，以便进行将来的可视化配置。因而，在我的项目中创立一个独立的文件夹，对立治理部署相干的文件，并且建设一个config.js和ssh.js文件，别离用于配置相干的部署信息和具体的部署脚本。其中，config.js中的配置具体如下： const config = { // 开发环境 dev: { host: '', username: 'root', password: '', catalog: '', // 前端文件压缩目录 port: 22, // 服务器ssh连贯端口号 privateKey: null // 私钥，私钥与明码二选一 }, // 测试环境 test: { host: '', // 服务器ip地址或域名 username: 'root', // ssh登录用户 password: '', // 明码 catalog: '', // 前端文件压缩目录 port: 22, // 服务器ssh连贯端口号 privateKey: null // 私钥，私钥与明码二选一 }, // 线上环境 pro: { host: '', // 服务器ip地址或域名 username: 'root', // ssh登录用户 password: '', // 明码，请勿将此明码上传至git服务器 catalog: '', // 前端文件压缩目录 port: 22, // 服务器ssh连贯端口号 privateKey: null // 私钥，私钥与明码二选一 }}module.exports = { // publishEnv: pro, publishEnv: config.pro, // 公布环境 buildDist: 'dist', // 前端文件打包之后的目录，默认dist buildCommand: 'npm run build', // 打包前端文件的命令 readyTimeout: 20000, // ssh连贯超时工夫 deleteFile: true, // 是否删除线上上传的dist压缩包 isNeedBuild: true // s是否须要打包}压缩打包内容压缩打包的内容，应用JSZIP插件，初始化一个const zip = new JSZIP()，而后在依照对应的语法进行具体的实现，其实现过程次要是通过的先递归读取相干的文件，而后退出到zip对象中，最初通过插件进行具体的压缩，最初写入到磁盘中。具体代码如下：递归读取打包文件 ...

关于前端工程化:完全-Serverless-文档型动态站点强行变身超薄-SPA

道歉，用 Serverless 做这个题目次要是借势炒作。本文内容跟 Serverless 其实没半毛钱关系。然而2X作者为啥要起这个名字博眼球呢？家喻户晓，Serverless 的概念并不像字面意义上那样的 “无服务”，而是将中心化的服务端利用打散成为一个个函数式的服务，节约了前端编码到产品上线两头服务部署的操作老本。实质上是一种云计算执行模型(Cloud Computing Execution Model)。聪慧的童鞋应该看完题目和开篇第一张图就猜到了我药里到底卖的什么葫芦 —— 本文内容其实是对于 SSG(Static Site Generation，动态站点生成) 的一个解决方案。介绍一下鄙人最近是如何将一个 Mongo + Egg + React + Node 架构的动静站点（外部非开源版本图表库官网）降(mo)级(gai)为纯动态 SPA （开源图表库 Cloud Charts 的官网站点）并部署在 github pages 上的（注：思考国内拜访问题，目前托管在 gitee 和 netlify）。为了凸显计划的独特之处，顺便为开源我的项目引引流，未免要先阐明一下我所遇到的需要场景的复杂度和非典型性： 1. 需要介绍1.1 背景略微介绍一下咱们目前正在折(guan)腾(shui)的一个 Github 开源我的项目：阿里云 Cloud Charts —— 又一个开源的信息可视化图表库。家喻户晓，这绝壁又双叒叕是一群无良技工在反复造轮子！（这里是一段辛辣的讥刺）。一段不正经的补充阐明： Cloud Charts 的前身是一套长期服务、利用于阿里云混合云场景的数据可视化解决方案（非开源版本），在日常工作中切实不便了很多不相熟前端工作的研发童鞋进行业务实际咱们推出开源版本的其中一个目标，在于寻找更多适宜积淀的业务场景和更多气味相投的优良的小伙伴 -(^_^)/ 没错~就是你！1.2 需要在保护 Cloud Charts 开源我的项目的同时，咱们也须要将其内网版本的文档、示例、教程等材料同步搬运到公网，以不便公网用户对我的项目的理解和应用。而对于 Cloud Charts 的开源版本（TXD Widgets），咱们曾经实现了一套用于托管相干文档和数据的官网站点（团体内网）。这个外部站点是基于 MongoDB + Egg.js + React.js 模式开发和保护的，最重要的一个特点是依附一个后盾管理系统，不便开发图表库的童鞋可能及时保护和公布图表库我的项目的性能个性和对应的教程、示例、API文档等内容。 ...

关于前端工程化:快速了解前端开发HTML的正确姿势

摘要：web前端开发（也称为客户端开发）次要是通过html，CSS和JavaScript等前端技术，实现网站在客服端的正确显示及交互性能。一、web规范介绍web规范： w3c：万维网联盟组织，用来制订web规范的机构（组织）web规范：制作网页遵循的标准web标准规范的分类：构造规范、体现规范、行为规范。构造：html。示意：CSS。行为：JavaScript。总结阐明：构造规范：相当于人的骨架。html就是用来制作网页的。体现规范：相当于人的衣服。CSS就是对网页进行丑化的。行为规范：相当于人的动作。JS就是让网页动起来，具备生命力的如果大家还不明确，请看下图二、浏览器介绍浏览器是网页运行的平台，罕用的浏览器有IE、火狐（Firefox)、谷歌（Chrome）、猎豹浏览器、Safari和Opera等浏览器内核： PS：「浏览器内核」也就是浏览器所采纳的「渲染引擎」，渲染引擎决定了浏览器如何显示网页的内容以及页面的格局信息。总结：渲染引擎是兼容性问题呈现的根本原因。三、开发工具介绍Sublime Text的应用 [Sublime Text应用技巧]Visual Studio Code编辑器WebStormPyCharm.....四、html介绍1、html概念 html全称HyperText Markup Language，翻译为超文本标记语言，它不是一种编程语言，是一种描述性的标记语言，用于形容超文本内容的显示方式。比方字体、色彩、大小等。超文本：音频，视频，图片称为超文本。标记：<英文单词或者字母>称为标记，一个HTML页面都是由各种标记组成。作用：HTML是负责形容文档语义的语言。留神：HTML语言不是一个编程语言(有编译过程)，而是一个标记语言(没有编译过程)，HTML页面间接由浏览器解析执行。 HTML只是负责形容文档语义的语言,在html中，除了语义，其余什么都没有。 html是一个纯本文文件（就是用txt文件改名而成），用一些标签来形容文字的语义，这些标签在浏览器外面是看不到的，所以称为“超文本”，所以就是“超文本标记语言”了。 So，接下来，咱们必定要学习一堆html中的标签对儿，这些标签对儿可能给文本不同的语义。 2、html的网络术语网页：由各种标记组成的一个页面就叫网页。主页(首页) : 一个网站的起始页面或者导航页面。标记： <p>称为开始标记，</p>称为完结标记，也叫标签。每个标签都规定好了非凡的含意。元素：<p>内容</p>称为元素.属性：给每一个标签所做的辅助信息。五、HTML的标准HTML是一个弱势语言辨别大小写页面的后缀名是html或者htm(有一些零碎不反对后缀名长度超过3个字符，比方dos零碎)HTML的构造：申明局部：次要作用是用来通知浏览器这个页面应用的是哪个规范。是HTML5规范。head局部：将页面的一些额定信息通知服务器。不会显示在页面上。body局部：咱们所写的须要显示进去的代码必须放在此标签內。1、编写HTML的标准（1）所有标记元素都要正确的嵌套，不能穿插嵌套。正确写法举例：<h1><font></font></h1> （2）所有的标记都必须小写。（3）所有的标记都必须敞开。双边标记：<span></span>单边标记：转成转成，还有<img src=“URL” />（4）所有的属性值必须加引号。<h1 id="head"></h1> （5）所有的属性必须有值。<input type="radio" checked="checked" /> 2、HTML的根本语法特色 1）、HTML对换行不敏感，对tab不敏感 HTML只在乎标签的嵌套构造，嵌套的关系。谁嵌套了谁，谁被谁嵌套了，和换行、tab无关。换不换行、tab不tab，都不影响页面的构造。也就是说，HTML不是依附缩进来示意嵌套的，就是看标签的包裹关系。然而，咱们发现有良好的缩进，代码更易读。要求大家都正确缩进标签。 2）、空白折叠景象 HTML中所有的文字之间，如果有空格、换行、tab都将被折叠为一个空格显示。 3）、标签要严格关闭 <html></html><meta />六、html构造新建HTML文件，输出 html:5,按tab键后，主动生成的代码如下： <!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>Document</title></head><body> </body></html>1、文档申明头任何一个规范的HTML页面，第一行肯定是一个以 <!DOCTYPE html>结尾的这一行，就是文档申明头，DocType Declaration，简称DTD。此标签可告知浏览器文档应用哪种 HTML 或 XHTML 标准。 ...