06/15
2016

##目录:fe工具包杂记

  1. phantomjs
  2. mac安装mysql5.7
  3. karma
  4. jasmine
  5. webpack编译工具

###1. phantomjs

####phantomjs作用: 我们可以phantomjs做什么: 1. 无页面测试:在不需要实际页面的情况下,在phantomjs中跑测试脚本; 2. 页面自动化:可以使用phantomjs加载页面,甚至可以引入其他js库,对dom进行操作,记录。 3. 网络监测:phantomjs提供对网络资源加载的监测 4. 截屏:phantomjs可以对页面进行截屏,可以自定与高度、宽度、区域。(强大!!!)

phantomjs的官网http://phantomjs.org/quick-start.html

####phantomjs npm phantomjs本身并不提供node的库,只提供cli命令,执行CommonJs的代码。

npm下的Medium/phantomjs是对phantomjs的封装,包括自动下载phantomjs的压缩包。调用npm phantomjs的时候也是调用phantomjs cli。

###2. mac安装mysql5.7

  1. 下载mac下的tar包,解压到/usr/local目录下(结果为/usr/local/mysql/bin的目录)
  2. 将/usr/local/mysql/bin加入到PATH目录下.
  3. 初始化data目录:http://dev.mysql.com/doc/refman/5.7/en/data-directory-initialization-mysqld.html,这一步会生成一个初始的root密码

    mysqld –initialize –user=mysql –basedir=/usr/local/mysql –datadir=/usr/local/mysql/data

  4. 修改mysql-data目录的用户权限

    sudo chown -R zhanglei55 /usr/local/mysql

  5. 修改root密码:http://dev.mysql.com/doc/refman/5.7/en/resetting-permissions.html

    //第一步关闭mysql server mysql.server stop //第二步建一个启动脚本(/Users/zhanglei55/init.mysql) ALTER USER ‘root’@’localhost’ IDENTIFIED BY ‘MyNewPass’; //第三步启动mysql server mysqld_safe –init-file=/Users/zhanglei55/init.mysql & //启动完成后删除init.mysql文件

  6. 完成

###3. karma karma只是提供了一个可以在真实浏览器跑测试的环境,具体还要结合注入qunit、jasmine等测试框架

###4. jasmine

####jasmine clock的实现 jasmine clock其实就是重写了全局的setTimeout、setInterval,当设置setTimeout(fn, delay1),会将fn-delay1加入任务队列,当调用tick(time)的时候,此时会去执行所有delay小于time的fn任务。只是模拟了一下时间。

###5. webpack编译工具

  1. 先贴一张webpack hook的流程图片链接http://www.teazean.com/images/webpack/webpack.svg;
  2. webpack就是一堆过程hook的框架。
  3. webpack里面有module、chunk、entrypoints、assert、record这些数据对象;以及Compilation等编译对象

    • module:一个module代表一个文件,每个module都有一个chunks属性,表示该module隶属于哪些chunks
    • chunk:一个chunk代表最终要被打成一个包的js-chunk。他有属性如下:
      • chunk.modules:代表该chunk包里有哪些modules
      • chunk.entrypoints:代表被哪些entry入口要引入
      • chunk.parents[chunks]:代表该chunk依赖哪些chunks
      • chunk.chunks:代表该chunk要被哪些chunks使用/引用/依赖
    • entrypoints:代表一个js入口,被实际引入的js入口,在config.entry配置
    • assert:代表要被最终生成文件的内容,由最终的某些modules和chunks转换而成。
    • record:记录信息
  4. webpack的简化过程就是:

    1. apply各种Plugin,注册各种hook的处理函数
    2. 然后创建Compilation对象(代表一次编译)
      • 2.1 编译开始时,使用module.loaders去加载文件生成modules
      • 2.2 在编译的过程中经历了modules、chunks、optimize等各种hook过程,交由plugin注册的hook函数处理、修改这些数据对象的关系
      • 2.3 接着将部分modules和chunks生成assets,以及一些optimize的hook等
    3. Compilation的使命完成之后,就产出assets文件的内容,接着就把这些assets输出到文件中。
    4. 一次build的过程完成了。
作者:teazean 文章地址: