nodePractice

node实战操作

一、Anydoorwhere

18/03/07 静态资源服务器

包括浏览器缓存、压缩、range请求

anydoorwhere

Tiny NodeJs Static Web Server.

安装

npm i -g anydoorwhere

使用方法

anydoorwhere # 把当前文件夹作为静态资源服务器根目录

anydoorwhere -p  8080 # 设置端口号为 8080

anydoorwhere -h localhost # 设置host  为localhost 

anydoorwhere -d /usr # 设置根目录为 /usr

二、WebpackTest

webpack构建工具练习

查看中文文档请点击

webpack 选项介绍

less-loader使用

点击查看更多

webpack4使用到extract-text-webpack-plugin(提取出css文件),直接使用

module: {
        rules: [
            {
                test: /\.js$/,
                include: [
                    path.resolve(__dirname, './src/script')
                ],
                loader: 'babel-loader',

            },
            {
                test: /\.less$/,
                use: extractLess.extract({
                    use: [{
                        loader: "css-loader"
                    }, {
                        loader: "less-loader"
                    }],
                    // use style-loader in development
                    fallback: "style-loader"
                })

            }
        ]
    },
    plugins: [
        extractLess
    ]

npm install extract-text-webpack-plugin --save-dev

安装会报错

(node:39976) DeprecationWarning: Tapable.plugin is deprecated. Use new API on `.hooks` instead

解决方法下载时添加@next

npm install extract-text-webpack-plugin@next --save-dev

externals

了解更多点击

externals 配置选项提供了「从输出的 bundle 中排除依赖」的方法

# 和module同级
externals:{
    'react':'React',
    'react-dom':'ReactDOM'
}

CommonsChunkPlugin

CommonsChunkPlugin 插件，是一个可选的用于建立一个独立文件(又称作 chunk)的功能，这个文件包括多个入口 chunk 的公共模块。通过将公共模块拆出来，最终合成的文件能够在最开始的时候加载一次，便存到缓存中供后续使用。这个带来速度上的提升，因为浏览器会迅速将公共的代码从缓存中取出来，而不是每次访问一个新页面时，再去加载一个更大的文件。

使用

entry: {
    index: "./src/script/index.js",
    vendor: ['react','react-dom'] //添加合并文件
}

//  =====

plugins: [
        extractLess,
        // 4.0已经废弃 改为下面的optimization用法
        // new webpack.optimize.CommonsChunkPlugin({
        //     names: ["vendor"]
        // })
    ],
    optimization:{ //使用提取
        splitChunks: {
            cacheGroups: {
                default: false,
                commons: {
                    test: /[\\/]node_modules[\\/]/,
                    name: "vendor",
                    chunks: "all"
                }
            }
        }
    }

Tree Shaking（uglifyjs-webpack-plugin）

了解跟多请点击

tree shaking 是一个术语，通常用于描述移除 JavaScript 上下文中的未引用代码(dead-code)。它依赖于 ES2015 模块系统中的静态结构特性，例如 import 和 export。这个术语和概念实际上是兴起于 ES2015 模块打包工具 rollup。

三、测试

nodejs断言 assert

更多 assert Api点击查看

const assert = require('assert');
const {add,mul} = require('../src/math');

// 最原始的测试方法
if(add(2,3)===5){
     console.log('0k');
}else{
console.log('error');
}

//node assert测试
assert.equal(add(2,3),5,'错误');

第三方类库 chai

点击查看更多详情

const {should,expect,assert} = require('chai');
should();
add(2,3).should.equal(5);
expect(add(2,3)).to.equal(5);
assert.equal(add(2,3),5);

Mocha

了解更多请点击

//mocha.js
const {should, expect, assert} = require('chai');
const {add, mul ,cover} = require('../src/math');


describe('#math', () => {
    describe('add', () => {
        it('should return 5 when 2 + 3',()=>{
            expect(add(2,3),5);
        });
        // it.only 只执行这一个
        // it.skip 跳过这个执行
        it('should return -1 when 2 + -3',()=>{
            expect(add(2,-3),-1);
        });
    });
    describe('mul', () => {
        it('should return 6 when 2 * 3',()=>{
            expect(mul(2,3),6);
        })
    });

    describe('cover',()=>{
        it('should return 1 when cover(2,1)',()=>{
           expect(cover(2,1)).to.equal(1);
        });
        it('should return 1 when cover(1,2)',()=>{
            expect(cover(1,2)).to.equal(1);
        });

        it('should return 12 when cover(2,2)',()=>{
            expect(cover(2,2)).to.equal(12);
        });
    })
});

// math.js
function min(a, b) {
    const c = 3;
    return (b + a) * c;
}

module.exports = {
    add: (...args) => {
        return args.reduce((prev, curr) => {
            return prev + curr;
        })
    },
    mul: (...args) => {
        return args.reduce((prev, curr) => {
            return prev * curr;
        })
    },
    cover: (a, b) => {
        if (a > b) {
            return a - b;
        } else if (a < b) {
            return b - a;
        } else {
            return min(a, b);
        }

    }

};

运行

npm test

测试 覆盖率 istanbul

了解更多请点击

运行

npm run cover

运行结果

持续集成

定义

持续集成是一种软件开发流程，有两个特征。

• 频繁地将代码集成到主干
• 每次集成都通过自动化的构建来验证

好处

• 尽早发现错误
• 防止分支大幅偏离主干

travis持续集成网站配置

codecov覆盖率图标生成

github各种图标集合

# .travis.yml 文件
language: node_js
node_js:
  - "8"
  - "9"
brancher:
  only:
    - "dev"
    - "master"
install:
  - "npm install --prefix ./Testing"
  - "npm install -g codecov"
script:
  - "npm run cover --prefix ./Testing"
  - "codecov"

Benchmark.js 性能测试

查看更多请点击

线上性能测试

const Benchmark = require('benchmark');

const suite = new Benchmark.Suite;

// add tests
suite.add('RegExp#test', function () {
    /o/.test('Hello World!');
    })
    .add('String#indexOf', function () {
        'Hello World!'.indexOf('o') > -1;
    })
    .add('String#match', function () {
        !!'Hello World!'.match(/o/);
    })
    // add listeners
    .on('cycle', function (event) {
        console.log(String(event.target));
    })
    .on('complete', function () {
        console.log('Fastest is ' + this.filter('fastest').map('name'));
    })
    // run async
    .run({'async': true});

UI测试

Jest

webdriver

爬虫

PuppeteerTest

cheerio 爬虫

cheerio git 地址

弊端对网站中反爬虫不起作用，实现请参考下面node栏下这两篇文章：

• node入门 简单实现爬虫 PuppeteerTest->src->cheerio01.js
• node爬虫升级版 PuppeteerTest->src->cheerio02.js

puppeteer 爬虫

puppeteer git 仓库

介绍

你可以在浏览器中手动完成的大部分事情都可以使用Puppeteer完成！比如：

• 生成页面的截图和PDF.
• 抓取SPA并生成预先呈现的内容（即“SSR”）
• 自动表单提交，UI测试，键盘输入等。
• 创建一个最新的自动化测试环境。使用最新的JavaScript和浏览器功能，直接在最新版本的Chrome中运行测试。
• 捕获您网站的时间线跟踪，以帮助诊断性能问题。

Api请参考git官网

puppeteer Api

Puppeteer -> screenshot.js

实现浏览器截屏

Puppeteer -> get-dimensions.js

获取浏览器信息

Puppeteer -> mn.js

爬取image.baidu.com首页图片