vue 非es6 写法怎么按须加载_Vue源码必学指南:flow(语法检查)以及rollup(模板打包)...

40c54d9eccc2920f4408643f45e8a7ec.gif点击上方蓝色字关注我们~4fc6a63c196a8ff2e508dfa7ebc2fbc4.png

一、前言

1b0bf81cfc968c1bb20a6ff033f20ab7.png虽然 Vue3 已经公开了代码,但是Vue3.0还处于开发阶段,直接上手使用Typescript是不合适的 , 对于前端的老手是不错的选择, 但是如果没有研究源码经验的开发者还是建议使用完善, 成熟的源码进行入手. 而 Vue 2.x 中使用的 flow 是一个类型的校验工具, 可以简单的认为他是一个静态分析工具, 或编译检查工具. 而且非破坏式的引入, 完全可以作为我们一般开发任务的工具进行引入. 所以我们要简单介绍一下 flow 的使用, 一方面可以提升平时开发效率, 另一方面为了看明白 Vue 的源码也很有必要. 另外构建工具使用 Rollup, 因为 Vue 就是用的它, 简单明了, 比起 Webpack 没它强大, 但是够简单.1b0bf81cfc968c1bb20a6ff033f20ab7.png4e21825504a9fb70417a9db78b0a0a71.png4fc6a63c196a8ff2e508dfa7ebc2fbc4.png

二、flow与rollup的基本用法  

1b0bf81cfc968c1bb20a6ff033f20ab7.pngflow这里推荐一下flow的官方地址,如果本章节有不够完善的地方,可以去官方进行详细的学习。https://flow.org/flow本身只是一个静态的语法检查工具优势:1.足够简单,合适使用2.可以为已有的项目,进行优化3.为typescript做一个铺垫准备使用:用法:1.使用命令行工具a.编写代码,执行命令检查如果有问题则提示,没问题跳过(和传统编译型语言 非常相似)2.使用IDE插件(推荐)a.也和现在编译语言一样,我们在编写完代码之后,错误信息IDE工具会给你提示出来(所见即所得)安装的内容:1.flow-bin它就是flow的静态类型检查工具(主程序)2.编译器(compiler),例如flow-remove-types,将类型的语法结构删除掉,还原成纯js的文件。安装:1.全局安装npm install --g flow-bind  项目目录安装npm install -D flow-bind2.npm init -y(-y默认全部yes快捷创建)创建package.json文件,在文件中的scripts中添加:6d3b647ebcc238e9705f5dcfb6568395.png使用命令:npm run flow init在项目文件夹的根目录创建一个.flowconfig文件npm run flow check对所有文件夹进行类型检查npm run flow启动Flow服务(只检查变化部分)flow执行Flow检查npm run flow stop停止Flow服务在被检查的文件最顶部添加 @flow 标识的注释对该文件进行检查flow 命令行工具的用法首先需要安装软件:$ npm i flow-bin flow-remove-types编写代码:代码中添加 一个 注释 // @flow 或者 /* @flow */在运行 flow 之前, 使用 npx flow init 初始化检查代码:$ npx flow注意:npx 是 node 工具, 是为了使用项目文件夹下 node_modules 中的可执行程序的工具。flow-remove-types将代码转换为纯 js 的代码npx flow-remove-types 源文件 -d 生成的文件一般会将该命令配置 到 package.json 文件中使用 IDE 插件:推荐使用 flow language support 这个插件 ( VS Code 编辑器 )Vue 源码说明:.flowconfig 中module.name_mapper='^sfc/(.*)$' -> '/src/sfc/\1' 的含义是将 代码中 from 后面导入模块使用的路径 sfc/xxx/aa 映射到 项目根目录/src/sfc/xxx/aarollup的基本用法官方地址:https://www.rollupjs.com/Rollup是一个javascript模块打包器,可以将小块代码编译成大块复杂的代码,例如library或应用程序。Rollup对代码模块使用新的准备化格式(es6模块语法)注意:a.版本, 生成文件的版本b.使用模块化的语法是ES6语法( http://es6.ruanyifeng.com/#docs/module )使用:c.安装 ( 局部 安装 )d.rollup 源文件的路径 --file 生成文件的路径 --format umd --name 生成的库的名字 1b0bf81cfc968c1bb20a6ff033f20ab7.png4e21825504a9fb70417a9db78b0a0a71.png4fc6a63c196a8ff2e508dfa7ebc2fbc4.png

三、总结

1b0bf81cfc968c1bb20a6ff033f20ab7.pngwebpack诞生的时候,为了解决css、图片等静态文件的构建和使得代码能够按需加载实现了code-splitting,在我们日常线上业务代码开发中,或多或少有一些静态资源需要打包,此时rollup显得不太适用。所以我们可以看到,在构建一些lib的时候可以选择rollup,而在构建一些应用的时候,选择webpack.1b0bf81cfc968c1bb20a6ff033f20ab7.png4e21825504a9fb70417a9db78b0a0a71.png

往期回顾

程序员择业疑惑:前端要凉?学习Vue还有必要吗?

牢记!前端工作中遇到99%的工作,都不能靠跳槽解决

前端这道“常见又讨厌”的面试难题,要怎么答?

技术大佬都在用碎片时间学习Vue充电,你竟然还能坐得住?

前端年度跳槽技术要求:不懂Vue千万别轻举妄动!!

·END·

极光学苑

带你飞向梦想的地方

微信号:极光训练营

 谢谢你的“在看” ❤ 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/468822.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

漫画|创业到底有多难?

我有一群同事,我们一起经历了一个产品从无到有的过程,从开始的斗志满满到最后跟老板的不欢而散,其中的辛酸苦楚也许只能我们自己能体味,在这过程中,我们共同经历过的事情,有快乐的,悲伤的&#…

【LeetCode】053. Maximum Subarray

题目: Find the contiguous subarray within an array (containing at least one number) which has the largest sum. For example, given the array [-2,1,-3,4,-1,2,1,-5,4],the contiguous subarray [4,-1,2,1] has the largest sum 6. 题解: 遍历所…

python怎么数据归一化_基于数据归一化以及Python实现方式

数据归一化:数据的标准化是将数据按比例缩放,使之落入一个小的特定区间,去除数据的单位限制,将其转化为无量纲的纯数值,便于不同单位或量级的指标能够进行比较和加权。为什么要做归一化:1)加快梯度下降求最…

Android面试总结经

自上周怒辞职以后,就開始苦逼的各种面试生涯,生活全然靠私活来接济,时有时没有,真难。还能快乐的玩耍吗。最多一天面试了5家,哎感觉都是不急招人,各种等待通知。好不easy等来一家。还克扣了薪资&#xff0c…

生成step文件_利用opencv给彦女王生成一副蒙太奇画像

大家好呀,前两天烈阳天道1上映了,不知道大家看没看呢,里面还有一小段彦穿越虫洞与猴哥相遇的画面,彦女王啊啊啊~~所以我去网上爬了二百来张我大学的风景画,然后找了以前存的彦女王的图片,生成了一幅蒙太奇画…

浪漫情人节|C语言画心型

1.前言新年第一天上班,先祝大家新年快乐,巧的是,今天刚好又是情人节,所以想了下用C实现画心形符号~过年的时候,跟我表哥去接新娘,实地看了下,如果一个汉字内心没有点浪漫的细胞,很难…

CS190.1x Scalable Machine Learning

这门课是CS100.1x的后续课,看课程名字就知道这门课主要讲机器学习。难度也会比上一门课大一点。如果你对这门课感兴趣,可以看看我这篇博客,如果对PySpark感兴趣,可以看我分析作业的博客。 Course Software Setup 这门课的环境配置…

嵩天python爬虫_我自己爬-python爬虫快速入门(一)

request库对于轻量级用户,像我一样只是准备写一个搞笑用的程序,requests是很方便的存在。安装通过pip就不说了request的几个主要方法requests.request() 构造一个请求,支撑以下各方法的基础方法requests.get() 获取HTML网页的主要方法&#x…

Linux_ACL_su

ACL ACL: 针对单一使用者, 文件, 目录进行rwx权限规范(当传统的Linux权限无法满足时采用) 1.ACL设置技巧: getfacl(取得ACL设置目录), setfacl(设置ACL规范) setfcal [-bkRd] [{-m | -x} acl 参数] 目标文件 m: 设置后续的acl参数给文件使用 x: 删除后续的acl参数 b: 移除…

./4.sh: No such file or directory

sh push到目标板后提示出错 #!/bin/bash echo "ladjfaosdjfoia"头bin/bash 我们要看,sh在哪里 130|rk3399_idpad:/data # which sh /system/bin/sh rk3399_idpad:/data # 所以上面的代码应该写成 #!/system/bin/sh echo "ladjfaosdjfoia"修…

Spring总结四:IOC和DI 注解方式

首先我们要了解注解和xml配置的区别: 作用一样,但是注解写在Bean的上方来代替我们之前在xml文件中所做的bean配置,也就是说我们使用了注解的方式,就不用再xml里面进行配置了,相对来说注解方式更为简便。 IOC获取对象注…

和后台如何对接_业务系统如何对接第三方服务?

在产品工作中,我们时常要对接第三方服务。本文作者从过往的对接项目经历中,提炼的关于业务系统,如何对接第三方服务的方法论,希望能对你有所帮助。随着公司业务的发展,我们有时会遇到,需要在自身业务系统中…

adb 启动某个apk

有时候需要用apk来启动某个apk adb shell am start -n com.android.launcher3/com.android.launcher3.Launcher 具体查看~ /rk3399_7in1/packages/apps/Launcher3/AndroidManifest.xml

Linux_PAM_用户之间的信息传递

PAM 账户信息的验证,可动态加载验证模块,提高验证的灵活性; PAM是一套应用程序接口,提供一连串的验证机制,借由一个与指令程序相同文件名的配置文件进行认证分析. 验证的过程包含三个字段: 1.验证类别(Type): author(认证):检验使用身份,需要密码进行检验account(账户):进行…

将枚举的键值绑定到下拉列表框

控制器代码: ///assemblyString:程序集名称的长格式,name:获取程序集实例中具有指定名称的 System.Type 对象,except:除了哪些枚举(键或值都可以)不加载到下拉列表框///此方法写在控…

Makefile 文件中的:obj-$(CONFIG_TEST) += test.o,这一类的是什么意思?

1、obj-$ $(CONFIG_TEST) 是一个整体,$(bbb)表示引用变量 bbb 比如定义 CONFIG_TESTy $(CONFIG_TEST) 就是 y obj-$(CONFIG_TEST) 就是 obj-y 又比如定义 CONFIG_TESTm $(CONFIG_TEST) 就是 m obj-$(CONFIG_TEST) 就是 obj-m obj-y foo.o 该例子告诉Kbuild在这目…

C++_IO类型_文件输入输出流_字符串流

IO类型 iostream: 用于窗口的输入输出fstream: 用于文件读写sstream :读写存储在内存中的string对象 注:他们继承于istream与ostream,因此istream对象也可用于读取ifstream, string对象, ostream对象同上; 并且iostream类型可在同一个流实现输入输出操作;. IO对象不可复制赋…

python网络编程证书_python 网络编程——客户端

网络通信的基本接口是socket,它扩展了操作系统的基本I/O到网络网络通信。socket可以通过socket()函数来建立,通过connect()函数来连接。得到了socket,可以确定本地和远程端点的IP地址和端口号。socket对不同的协议来说都是一种通用的接口&…

AC日记——集合位置 洛谷 P1491

集合位置 思路&#xff1a; 次短路&#xff1b; 先走一遍最短路&#xff1b; 记录最短路径&#xff0c;然后依次删边走最短路&#xff1b; 最短的长度就是次短路&#xff1b; 来&#xff0c;上代码&#xff1a; #include <queue> #include <cmath> #include <cs…

Kconfig中的“depends on”和“select”

在Kconfig文件中&#xff1a; config Adepends on Bselect C它的含义是&#xff1a;CONFIG_A配置与否&#xff0c;取决于CONFIG_B是否配置。一旦CONFIG_A配置了&#xff0c;CONFIG_C也自动配置了。 参考资料&#xff1a;“select” vs “depends” in kernel Kconfig。 所以去…