新闻资讯

首页 新闻资讯 弘成IT资讯

Vue源码-flow与rollup

2019-12-17 弘成IT
分享到:

  一、前言

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

  二、flow

  这里推荐一下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-bind

  2、 npm init -y(-y默认全部yes快捷创建)创建package.json文件,在文件中的scripts中添加:

\
   

  使用命令

  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 代码的时候, VS CODE 会下滑红色波浪线

  推荐使用 flow language support 这个插件 ( VS Code 编辑器 )

  Vue 源码说明

  .flowconfig 中

  module.name_mapper='^sfc/(.*)$' -> '<PROJECT_ROOT>/src/sfc/\1' 的含义是将 代码中 from 后面导入模块使

  用的路径 sfc/xxx/aa 映射到 项目根目录/src/sfc/xxx/aa

  二、rollup的基本用法

  官方地址: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 生成的库的名字

  三、总结

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

弘成IT版权与免责声明
1、凡本网站注明稿件来源为:弘成IT的所有文字、图片和音视频稿件,版权均属本网站所有,任何媒体、网站或个人未经本网协议授权不得转载、链接、转贴或以其他方式复制发表。已经本网协议授权的媒体、网站,在下载使用时必须注明“稿件来源:弘成IT”,违者本网将依法追究责任。
2、本网注明稿件来源为其他媒体的文/图等稿件均为转载稿,本网转载出于非商业性的教育和科研之目的,并不意味着赞同其观点或证实其内容的真实性。如转载稿涉及版权等问题,请作者在两周内速来电或来函联系。