打造自己的集成开发工作站(四)——webpack, typescript eslint

通过前三篇文章对微前端有了一些了解，并初步学习了一些single-spa概念；从这篇开始手动搭建一个基于single-spa的微前端项目框架。

使用的主要技术包括：single-spa，webpack，typescript等，后期随着需要进行调整。

项目主要分为两部分：view，model；view使用single-spa管理，主要负责视图与交互逻辑；model 使用typescript编写，实现相应用户操作，简单数据逻辑，后台通信，统一会话管理等；

项目名称：nuts-waxberry

使用npm初始化

PS D:\WebstormProjects\nuts-waxberry> npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See `npm help json` for definitive documentation on these fields
and exactly what they do.

Use `npm install ` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
package name: (nuts-waxberry)
version: (1.0.0)
description: a project frame
entry point: (index.js) main.js
test command:
git repository:
keywords:
author: sleeber
license: (ISC)
About to write to D:\WebstormProjects\nuts-waxberry\package.json:

{
  "name": "nuts-waxberry",
  "version": "1.0.0",
  "description": "a project frame",
  "main": "main.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "sleeber",
  "license": "ISC"
}


Is this OK? (yes)
PS D:\WebstormProjects\nuts-waxberry>

增加src文件夹，并在src文件夹下增加index.html

增加main.js

console.log('this is test');

增加webpack.config.js

const path = require('path');

module.exports = {
    entry: './src/main.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'nuts.bundle.js'
    },
    mode: 'development'
};

 安装webpack，webpack-cli

PS D:\WebstormProjects\nuts-waxberry> yarn add webpack -D
yarn add v1.22.0
info No lockfile found.
[1/4] Resolving packages...
warning webpack > watchpack > watchpack-chokidar2 > [email protected]: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.
warning webpack > watchpack > watchpack-chokidar2 > chokidar > [email protected]: fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade to fsevents 2.
warning webpack > micromatch > snapdragon > source-map-resolve > [email protected]: https://github.com/lydell/resolve-url#deprecated
warning webpack > micromatch > snapdragon > source-map-resolve > [email protected]: Please see https://github.com/lydell/urix#deprecated
[2/4] Fetching packages...
info [email protected]: The platform "win32" is incompatible with this module.
info "[email protected]" is an optional dependency and failed compatibility check. Excluding it from installation.
info [email protected]: The platform "win32" is incompatible with this module.
info "[email protected]" is an optional dependency and failed compatibility check. Excluding it from installation.
[3/4] Linking dependencies...
[4/4] Building fresh packages...
success Saved lockfile.
warning Your current version of Yarn is out of date. The latest version is "1.22.4", while you're on "1.22.0".
info To upgrade, download the latest installer at "https://yarnpkg.com/latest.msi".
success Saved 208 new dependencies.
info Direct dependencies
└─ [email protected]
info All dependencies
├─ @webassemblyjs/[email protected]
├─ @webassemblyjs/[email protected]
。。。
├─ [email protected]
├─ [email protected]
└─ [email protected]
Done in 7.86s.
PS D:\WebstormProjects\nuts-waxberry> yarn add webpack-cli -D 
yarn add v1.22.0
[1/4] Resolving packages...
[2/4] Fetching packages...
info [email protected]: The platform "win32" is incompatible with this module.
info "[email protected]" is an optional dependency and failed compatibility check. Excluding it from installation.
info [email protected]: The platform "win32" is incompatible with this module.
info "[email protected]" is an optional dependency and failed compatibility check. Excluding it from installation.
[3/4] Linking dependencies...
[4/4] Building fresh packages...
success Saved lockfile.
success Saved 42 new dependencies.
info Direct dependencies
└─ [email protected]
info All dependencies
├─ [email protected]
。。。
└─ [email protected]
Done in 4.33s.
PS D:\WebstormProjects\nuts-waxberry> 

webpack编译测试

 增加html-webpack-plugin

编译测试插件是否安装成功

 增加test.ts文件

function disp(s1: string): void;
function disp(n1: number, s1: string): void;

function disp(x: any, y?: any): void {
    console.log(x);
    console.log(y);
}
disp("abc")
disp(1, "xyz");

 增加 ts-loader, typescript 

yarn add ts-loader -D
yarn add typescript -D

 增加tsconfig.js

{
    "compilerOptions": {
        "sourceMap": true,
        "target": "es5",
        "baseUrl": "./"
    },
    "include": [
        "src/**/*.ts",
        "modules/**/*.ts"
    ], // 要打包的文件
    "exclude": [
        "node_modules",
        "*.test.ts"
    ]
} 

编译测试typescript是否能编译

配置webpack-dev-server

安装插件: yarn add webpack-dev-server -D

修改webpack.config.js增加

    devtool: "inline-source-map",
    devServer: {
        contentBase: path.join(__dirname, 'dist'),
        compress: true,
        port: 9000
    }
    

修改package.json

"scripts": {
    "start:dev": "webpack-dev-server",
    "test": "echo \"Error: no test specified\" && exit 1"
  },

测试devserver

增加typescript-eslint代码静态检查

yarn add -D eslint typescript @typescript-eslint/parser @typescript-eslint/eslint-plugin

增加.eslintrc.js配置文件

module.exports = {
    root: true,
    parser: '@typescript-eslint/parser',
    plugins: [
        '@typescript-eslint',
    ],
    extends: [
        'eslint:recommended',
        'plugin:@typescript-eslint/recommended',
    ],
    "env": {
        "browser": true,
    }
};

增加.eslintignore文件

# don't ever lint node_modules
node_modules
# don't lint build output (make sure it's set to your correct build folder name)
dist
# don't lint nyc coverage output
coverage
# don't lint config file
webpack.config.js
.eslintrc.js

 测试插件

至此完成项目环境的初步搭建。