【实操】搭建一个本地算法运行+测试环境【nodejs+webpack+ts+jest】

场景：学习慕课-2周刷完100道前端优质面试真题。在练习算法的时，试试自己搭建一个web服务跑代码，方便我们运行ts文件，查看结果。以及搭配测试工具，来帮我们测试代码的项目。

搭建流程：

【第一步】项目初始化，生成默认的package.json

$ npm init -y

【第二步】引入webpack

npm install webpack webpack-cli --save-dev

【第三步】目录调整

• 创建分发代码(./dist)文件夹用于存放分发代码
• 创建入口文件./src/index.js
• 创建webpack配置文件webpack.config.js
• 创建练习题目文件夹./src/question

// webpack.config.js
const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
};

【第四步】设置 HtmlWebpackPlugin 自动打包生成index.html

引入HtmlWebpackPlugin

$ npm install --save-dev html-webpack-plugin

修改webpack.config.js配置

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  mode: 'development',
  entry: {
    index: './src/index.ts'
  },
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist'),
    clean: true // 清理/dist 文件夹
  },
  plugins: [
    new HtmlWebpackPlugin({
      title: 'development',
    }),
  ]
}

尝试通过配置执行构建

$ npx webpack --config webpack.config.js

修改package.json，设置一个构建快捷方式，执行npm run build即可

"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
  "build": "webpack"
 }

【第五步】使用webpack-dev-server启动一个基本的web server

引入

$ npm install --save-dev webpack-dev-server

 修改webpack配置文件devServer，告知 dev server，从什么位置查找文件

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  mode: 'development',
  entry: {
    index: './src/index.ts'
  },
  devtool: 'inline-source-map',
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist'),
    clean: true
  },
  plugins: [
    new HtmlWebpackPlugin({
      title: 'development',
    }),
  ],
  devServer: {
    static: './dist'
  }
}

修改package.json，添加一个可以直接运行 dev server 的 script

  "scripts": {
    "build": "webpack",
    "start": "webpack serve --open"
  },

【第六步】使用typescript

引入typescript

$ npm install --save-dev typescript ts-loader

创建ts配置文件tsconfig.json

{
  "compilerOptions": {
    "outDir": "./dist/",
    "noImplicitAny": false,
    "module": "es6",
    "target": "es5",
    "jsx": "react",
    "allowJs": true,
    "moduleResolution": "node",
    "types": [
      "webpack-env"
    ],
  }
}

• 修改webpack.config.js配置
   

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  mode: 'development',
  entry: {
    index: './src/index.ts' // 将./src/index.js修改为index.ts
  },
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: 'ts-loader',
        exclude: /node_modules/,
      },
    ],
  },
  resolve: {
    extensions: ['.tsx', '.ts', '.js'],
  },
  devtool: 'inline-source-map',
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist'),
    clean: true
  },
  plugins: [
    new HtmlWebpackPlugin({
      title: 'development',
    }),
  ],
  devServer: {
    static: './dist'
  }
}

【第七步】单元测试jest

引入jest

$ npm install --save-dev jest babel-jest @babel/core @babel/preset-env @types/jest ts-jest

创建jest配置文件jest.config.js

/** @type {import('ts-jest/dist/types').InitialOptionsTsJest} */
module.exports = {
  preset: 'ts-jest',
  testEnvironment: 'node',
};

修改tsconfig.json

{
  "compilerOptions": {
    "outDir": "./dist/",
    "noImplicitAny": false,
    "module": "es6",
    "target": "es5",
    "jsx": "react",
    "allowJs": true,
    "moduleResolution": "node",
    "types": [
      "webpack-env",
      "jest" //在此处添加jest或 mocha
    ],
  }
}

修改package.json

  "scripts": {
    "test": "jest",
    "build": "webpack",
    "start": "webpack serve --open"
  },

完成～

配置好以后来试一试吧！

在./src/question文件夹下创建01_question.ts以及01_question.test.ts，然后npm run test进行测试，npm run start启动服务可运行代码查看控制台输出内容

// 01_question.ts

/**
 * 数组旋转
 * @param arr 数组
 * @param k 旋转次数
 * @returns 旋转后的数组
 */
export function routate1(arr: number[], k: number): number[] {
  const length = arr.length;
  if (!k || length === 0) return arr;
  const step = Math.abs(k) % length;

  // O(n^2)
  for (let i = 0; i < step; i++) {
      const n = arr.pop()
      if (n != null) {
          arr.unshift(n) // 数组是一个有序结构，unshift操作非常慢 O(n)
      }
  }
  return arr;
}

console.log(routate1([1, 2, 3, 4, 5, 6, 7], 3))

// 01_question.test.ts

import { routate1 } from "./01array-route";

describe('数组旋转', () => {
    it('正常情况', () => {
        const arr = [1, 2, 3, 4, 5, 6, 7]
        const k = 3;
        const res = routate1(arr, k);
        expect(res).toEqual([5, 6, 7, 1, 2, 3, 4]);
    })

    it('数组为空', () => {
        const arr = []
        const k = 3;
        const res = routate1(arr, k);
        expect(res).toEqual([]);
    })

    it('k 是负值', () => {
        const arr = [1, 2, 3, 4, 5, 6, 7]
        const k = -3;
        const res = routate1(arr, k);
        expect(res).toEqual([5, 6, 7, 1, 2, 3, 4]);
    })

    it('k 是0', () => {
        const arr = [1, 2, 3, 4, 5, 6, 7]
        const k = 0;
        const res = routate1(arr, k);
        expect(res).toEqual(arr);
    })

    it('k 不是数字', () => {
        const arr = [1, 2, 3, 4, 5, 6, 7]
        const k = 'abc';

        // @ts-ignore
        const res = routate1(arr, k);
        expect(res).toEqual([1, 2, 3, 4, 5, 6, 7]);
    })

    it('正常情况', () => {
        const arr = [1, 2, 3, 4, 5, 6, 7]
        const k = 3;
        const res = routate2(arr, k);
        expect(res).toEqual([5, 6, 7, 1, 2, 3, 4]);
    })

    it('数组为空', () => {
        const arr = []
        const k = 3;
        const res = routate2(arr, k);
        expect(res).toEqual([]);
    })

    it('k 是负值', () => {
        const arr = [1, 2, 3, 4, 5, 6, 7]
        const k = -3;
        const res = routate2(arr, k);
        expect(res).toEqual([5, 6, 7, 1, 2, 3, 4]);
    })

    it('k 是0', () => {
        const arr = [1, 2, 3, 4, 5, 6, 7]
        const k = 0;
        const res = routate2(arr, k);
        expect(res).toEqual(arr);
    })

    it('k 不是数字', () => {
        const arr = [1, 2, 3, 4, 5, 6, 7]
        const k = 'abc';

        // @ts-ignore
        const res = routate2(arr, k);
        expect(res).toEqual([1, 2, 3, 4, 5, 6, 7]);
    })
})

源码：

github代码地址：GitHub - qi-Ruofan/my-algorithmGitHub - qi-Ruofan/my-algorithmGitHub - qi-Ruofan/my-algorithm