chore: unitTest use ts

__tests__/basic.test.js → __tests__/basic.test.ts

@@ -1,19 +1,22 @@
-const { resolve } = require('path');
-const webpack = require('webpack');
-const rimraf = require('rimraf');
+import { resolve } from 'path';
+import webpack, { Configuration } from 'webpack';
+import pkg from 'webpack/package.json';
+import LogFilesizeWebpackPlugin from '../lib/index';
+const baseConfig = require('./support/webpack.base.conf');
 
-const webpackMajorVersion = Number(require('webpack/package.json').version.split('.')[0]);
+const webpackMajorVersion = Number(pkg.version.split('.')[0]);
 
 if (isNaN(webpackMajorVersion)) {
   throw new Error('Cannot parse webpack major version');
 }
-
-const LogFilesizeWebpackPlugin = require('../lib/index');
-const baseConfig = require('./support/webpack.base.conf');
-
 const OUTPUT_DIR = resolve(__dirname, '../dist/basic-test');
 
-const testLogFilesizePlugin = (webpackConfig, pluginInstance, done) => {
+const testLogFilesizePlugin = (
+  webpackConfig: Configuration,
+  pluginInstance: any,
+  done: Function
+) => {
+  // console.log(webpackConfig)
   webpack(webpackConfig, (err, stats) => {
     expect(err).toBeFalsy();
     const compilationErrors = (stats.compilation.errors || []).join('\n');
@@ -49,17 +52,19 @@ describe('LogFilesizeWebpackPlugin', () => {
   });
 
   it('shoule be printfStats', (done) => {
-    const config = { ...baseConfig };
+    const config = { ...baseConfig } as Configuration;
+    // @ts-ignore
     config.entry = {
-      index1: resolve(__dirname, './fixtures/index1.js'),
-      index2: resolve(__dirname, './fixtures/index2.js')
+      index1: resolve(__dirname, './fixtures/index1.tsx'),
+      index2: resolve(__dirname, './fixtures/index2.tsx')
     };
+    // @ts-ignore
     config.output = {
       path: OUTPUT_DIR,
       filename: 'js/[name].[chunkhash:6].js',
       chunkFilename: 'js/[name].[chunkhash:6].js'
     };
-    config.plugins.push(log);
+    config.plugins!.push(log);
     testLogFilesizePlugin(config, log, done);
   });
 });

__tests__/fixtures/index2.js → __tests__/fixtures/index2.tsx

@@ -1,3 +1,3 @@
-import { generateRandom } from '@/utils/index';
+import { generateRandom } from '@/utils';
 
 console.log('== Index2 ==', generateRandom(10));

__tests__/fixtures/tsconfig.json

@@ -0,0 +1,24 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "module": "commonjs",
+    "lib": ["ES2015", "ESNext", "DOM"],
+    "outDir": "lib",
+    "strict": true,
+    "moduleResolution": "node",
+    "declaration": true,
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./*"] // fixtures 目录别名
+    },
+    "jsx": "react",
+    "resolveJsonModule": true,
+    "pretty": true,
+    "esModuleInterop": true,
+    "experimentalDecorators": true,
+    "skipLibCheck": true,
+    "removeComments": true
+  },
+  "include": ["./**/*", "typings.d.ts"],
+  "exclude": ["node_modules", "**/test/*", "**/*.spec.ts", "lib", "es", "dist", "build", "example"]
+}

__tests__/fixtures/typings.d.ts

@@ -0,0 +1,7 @@
+declare module '*.css';
+declare module '*.less';
+declare module '*.png';
+declare module '*.jpg';
+declare module '*.jpeg';
+declare module '*.svg';
+declare module '*.ttf';

__tests__/fixtures/utils/index.js → __tests__/fixtures/utils/index.ts

@@ -4,7 +4,7 @@
  * @param {number} min - The minimum value of the interval, the default is 0
  * @param {bool} int - Whether it is an integer, the default is true, which is an integer
  */
-export const generateRandom = (max, min = 0, int = true) => {
+export const generateRandom = (max: number, min = 0, int = true) => {
   min = Math.ceil(min);
   max = Math.floor(max);
   const res = Math.random() * (max - min + 1) + min;

__tests__/support/webpack.base.conf.js

@@ -5,18 +5,19 @@ const { CleanWebpackPlugin } = require('clean-webpack-plugin');
 const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin');
 const ManifestPlugin = require('webpack-manifest-plugin');
 
-module.exports = {
+const config = (module.exports = {
   mode: 'development',
   stats: 'none',
   resolve: {
     alias: {
       '@': resolve(__dirname, '../fixtures')
-    }
+    },
+    extensions: ['.js', '.jsx', '.ts', '.tsx']
   },
   module: {
     rules: [
       {
-        test: /\.js(x?)$/,
+        test: /[\\.]js(x?)$/,
         include: resolve(__dirname, '../fixtures'),
         use: [
           {
@@ -48,7 +49,19 @@ module.exports = {
         ]
       },
       {
-        test: /\.(le|c)ss$/,
+        test: /[\\.]ts(x?)$/,
+        include: resolve(__dirname, '../fixtures'),
+        use: [
+          {
+            loader: 'babel-loader',
+            options: {
+              presets: ['@babel/preset-env', '@babel/preset-react', '@babel/preset-typescript']
+            }
+          }
+        ]
+      },
+      {
+        test: /[\\.](le|c)ss$/,
         include: resolve(__dirname, '../fixtures'),
         use: [
           MiniCssExtractPlugin.loader,
@@ -73,7 +86,7 @@ module.exports = {
         ]
       },
       {
-        test: /\.(png|jpg|jpeg|gif|svg|svga)$/,
+        test: /[\\.](png|jpg|jpeg|gif|svg|svga)$/,
         include: resolve(__dirname, '../fixtures'),
         use: [
           {
@@ -134,4 +147,4 @@ module.exports = {
     }),
     new ManifestPlugin()
   ]
-};
+});

jest.config.js

@@ -2,6 +2,7 @@
 // https://jestjs.io/docs/en/configuration.html
 
 module.exports = {
+  preset: 'ts-jest',
   displayName: {
     name: 'LOG-FILESIZE',
     color: 'blue'

package.json

@@ -2,14 +2,7 @@
   "name": "@jsany/log-filesize-webpack-plugin",
   "version": "1.2.10",
   "description": "log assets size after webpack build(wirte by typescript)",
-  "keywords": [
-    "log",
-    "assets",
-    "filesize",
-    "gzip",
-    "webpack",
-    "plugin"
-  ],
+  "keywords": ["log", "assets", "filesize", "gzip", "webpack", "plugin"],
   "homepage": "https://github.com/jsany/log-filesize-webpack-plugin#readme",
   "bugs": {
     "url": "https://github.com/jsany/log-filesize-webpack-plugin/issues"
@@ -22,9 +15,7 @@
   "author": "jiangzhiguo2010",
   "main": "lib/index.js",
   "typings": "lib/index.d.ts",
-  "files": [
-    "lib"
-  ],
+  "files": ["lib"],
   "scripts": {
     "build": "rimraf lib/* && ttsc",
     "coverage": "jest --runInBand --coverage",
@@ -40,12 +31,8 @@
     }
   },
   "lint-staged": {
-    "**/*.{js,ts,md,json}": [
-      "prettier --write"
-    ],
-    "package.json": [
-      "sort-package-json"
-    ]
+    "**/*.{js,ts,md,json}": ["prettier --write"],
+    "package.json": ["sort-package-json"]
   },
   "dependencies": {
     "chalk": "^4.1.0",
@@ -61,11 +48,14 @@
     "@babel/plugin-transform-runtime": "^7.10.5",
     "@babel/preset-env": "^7.10.4",
     "@babel/preset-react": "^7.10.4",
+    "@babel/preset-typescript": "^7.10.4",
     "@commitlint/cli": "^9.1.1",
     "@commitlint/config-conventional": "^9.1.1",
-    "@types/jest": "^26.0.4",
+    "@types/jest": "^26.0.9",
     "@types/mime": "^2.0.2",
     "@types/node": "^14.0.23",
+    "@types/react": "^16.9.44",
+    "@types/react-dom": "^16.9.8",
     "@types/rimraf": "^3.0.0",
     "@types/webpack": "^4.41.21",
     "@typescript-eslint/eslint-plugin": "^3.6.1",
@@ -91,6 +81,7 @@
     "rimraf": "^3.0.2",
     "sort-package-json": "^1.44.0",
     "standard-version": "^8.0.2",
+    "ts-jest": "^26.1.4",
     "ttypescript": "^1.5.10",
     "typescript": "^3.9.6",
     "typescript-transform-paths": "^1.1.14",

tsconfig.json

@@ -13,6 +13,8 @@
       "@@/*": ["../*"] // 根目录别名
     },
     "plugins": [{ "transform": "typescript-transform-paths" }],
+    "resolveJsonModule": true,
+    "allowSyntheticDefaultImports": true,
     "pretty": true,
     "esModuleInterop": true,
     "experimentalDecorators": true,