Use typescript for webpack

Author: sheepzh

index.d.ts

@@ -0,0 +1,4 @@
+declare module "*.json" {
+    const value: any
+    export default value
+}

package-lock.json

@@ -2,9 +2,10 @@
   "name": "timer",
   "version": "0.1.7",
   "description": "Web timer",
+  "homepage": "https://github.com/sheepzh/timer",
   "scripts": {
-    "dev": "webpack --mode=development --config=webpack/webpack.dev.js --watch",
-    "build": "webpack --mode=production --config=webpack/webpack.prod.js",
+    "dev": "webpack --mode=development --config=webpack/webpack.dev.ts --watch",
+    "build": "webpack --mode=production --config=webpack/webpack.prod.ts",
     "test": "jest",
     "test-c": "jest --coverage"
   },
@@ -13,6 +14,8 @@
   "devDependencies": {
     "@types/chrome": "0.0.145",
     "@types/jest": "^26.0.23",
+    "@types/node": "^15.12.2",
+    "@types/webpack": "^5.28.0",
     "babel-loader": "^8.2.2",
     "copy-webpack-plugin": "^9.0.0",
     "css-loader": "^5.2.6",
@@ -24,14 +27,17 @@
     "style-loader": "^2.0.0",
     "ts-jest": "^27.0.3",
     "ts-loader": "^9.2.3",
+    "ts-node": "^10.0.0",
     "tslib": "^2.2.0",
     "typescript": "^4.3.2",
     "url-loader": "^4.1.1",
     "webpack": "^5.38.1",
     "webpack-cli": "^4.7.2"
   },
   "dependencies": {
+    "@types/copy-webpack-plugin": "^8.0.0",
     "@types/echarts": "^4.9.8",
+    "@types/generate-json-webpack-plugin": "^0.3.3",
     "echarts": "^5.1.2",
     "element-plus": "*",
     "file-saver": "^2.0.5",

package.json

@@ -9,7 +9,7 @@ import trender, { TrenderMessage } from './components/trender'
 import menu, { MenuMessage } from './components/menu'
 import setting, { SettingMessage } from './components/setting'
 
-type I18nMessage = {
+export type I18nMessage = {
   lang: { name: string }
   app: AppMessage
   message: MsgMessage,
@@ -65,6 +65,5 @@ export default messages
 
 // Used for export json file of chrome 
 // @see [project-path]/webpack/plugins/generate-locale-for-chrome.js
-// And this can be auto injected via this plugin in the future
-const globalAny: any = global
+const globalAny = global as any
 globalAny.exportsToChrome = messages

src/locale/index.ts

@@ -4,9 +4,10 @@
  * @author zhy
  * @since 0.0.1
  */
-const { version, author, homepage } = require('../package.json')
-// const { defaultLocale } = require('./locale/index')
-module.exports = {
+// @ts-ignore
+import * as packageInfo from '../package.json'
+const { version, author, homepage } = packageInfo as any
+export default {
   name: '__MSG_app_marketName__',
   description: "__MSG_app_description__",
   version,

src/manifest.js src/manifest.tssrc/manifest.js renamed to src/manifest.ts

@@ -2,7 +2,9 @@
     "compilerOptions": {
         "module": "commonjs",
         "target": "es5",
+        "esModuleInterop": true,
         "sourceMap": true,
+        "resolveJsonModule": true,
         "importHelpers": true,
         "moduleResolution": "node"
     },

tsconfig.json

@@ -0,0 +1,15 @@
+// Declare for 'filemanager-webpack-plugin'
+declare module 'filemanager-webpack-plugin' {
+    type Endpoint = 'onEnd'
+    // Sequence
+    type OperationSeq = Partial<Record<CommandName, CommandConfig>>
+    type CommandName = 'delete' | 'copy' | 'archive' | 'move'
+    type CommandConfig = string[] | { source: string, destination: string }[]
+
+    type Options = Partial<Record<Endpoint, OperationSeq[]>>
+
+    class FilemanagerWebpackPlugin {
+        constructor(config: { events: Options })
+    }
+    export default FilemanagerWebpackPlugin
+}

webpack/index.d.ts

@@ -1,8 +1,9 @@
-const path = require('path')
-const fs = require('fs')
+import * as path from 'path'
+import * as fs from 'fs'
+import webpack from 'webpack'
 
 // Genearate the messages used by Chrome
-function translate (obj, parentKey = '') {
+function translate(obj: any, parentKey = ''): any {
     const result = {}
     if (typeof obj === 'object') {
         for (const key in obj) {
@@ -27,23 +28,25 @@ function translate (obj, parentKey = '') {
 /**
  * The plugin to generate locale message files for browser
  */
-class GenerateLocaleForChrome {
+class GenerateLocaleForChrome implements webpack.WebpackPluginInstance {
+    outputFileName: string
+    outputFileImport: string
     /**
      * @param {*} name        the file name to generate
      * @param {*} importFile 
      */
-    constructor(name, importFile) {
+    constructor(name: string, importFile: string) {
         this.outputFileName = `generate_locale_messages_for_chrome_${name}`
         this.outputFileImport = importFile
     }
-    async apply (compiler) {
+    async apply(compiler: webpack.Compiler) {
         const options = compiler.options
         options.entry[this.outputFileName] = { import: [this.outputFileImport] }
         const outputPath = options.output.path
         const outFilePath = path.join(outputPath, `${this.outputFileName}.js`)
         compiler.hooks.done.tap('GenerateLocaleForChromePlugin', () => {
             require(outFilePath)
-            const messages = global.exportsToChrome
+            const messages = (global as any).exportsToChrome
             for (const localeName in messages) {
                 // .e.g
                 // {
@@ -68,4 +71,4 @@ class GenerateLocaleForChrome {
     }
 }
 
-module.exports = GenerateLocaleForChrome
+export default GenerateLocaleForChrome

…ck/plugins/generate-locale-for-chrome.js …ck/plugins/generate-locale-for-chrome.tswebpack/plugins/generate-locale-for-chrome.js renamed to webpack/plugins/generate-locale-for-chrome.ts webpack/plugins/generate-locale-for-chrome.js renamed to webpack/plugins/generate-locale-for-chrome.ts

@@ -1,13 +1,16 @@
-const path = require('path')
-const GenerateJsonPlugin = require('generate-json-webpack-plugin')
-const GenerateLocaleForChrome = require('./plugins/generate-locale-for-chrome')
-const CopyWebpackPlugin = require('copy-webpack-plugin')
-
+import * as  path from 'path'
+import GenerateJsonPlugin from 'generate-json-webpack-plugin'
+import GenerateLocaleForChrome from './plugins/generate-locale-for-chrome'
+import CopyWebpackPlugin from 'copy-webpack-plugin'
+import * as webpack from 'webpack'
 // Generate json files 
-const manifest = require('../src/manifest')
-const generateJsonPlugins = [new GenerateJsonPlugin('manifest.json', manifest), new GenerateLocaleForChrome('locale', './src/locale')]
+import manifest from '../src/manifest'
+const generateJsonPlugins = [
+    new GenerateJsonPlugin('manifest.json', manifest) as unknown as webpack.WebpackPluginInstance,
+    new GenerateLocaleForChrome('locale', './src/locale')
+]
 
-const optionGenerator = (outputPath, manifestHooker) => {
+const optionGenerator = (outputPath: string, manifestHooker?: (config: webpack.Configuration) => void) => {
     manifestHooker && manifestHooker(manifest)
     const plugins = [
         ...generateJsonPlugins,
@@ -18,7 +21,7 @@ const optionGenerator = (outputPath, manifestHooker) => {
             ]
         })
     ]
-    return {
+    const optionTemplate: webpack.Configuration = {
         entry: {
             background: './src/background',
             content_scripts: './src/content-script',
@@ -58,7 +61,7 @@ const optionGenerator = (outputPath, manifestHooker) => {
             extensions: ['.ts', ".js", '.css', '.scss', '.sass'],
         }
     }
+    return optionTemplate
 }
 
-
-module.exports = optionGenerator
+export default optionGenerator

webpack/webpack.common.js webpack/webpack.common.tswebpack/webpack.common.js renamed to webpack/webpack.common.ts

@@ -1,12 +1,11 @@
-const path = require('path')
-const GenerateJsonPlugin = require('generate-json-webpack-plugin')
-const FileManagerWebpackPlugin = require('filemanager-webpack-plugin')
-const optionGenerator = require('./webpack.common')
-const webpack = require('webpack')
-
+import * as path from 'path'
+import GenerateJsonPlugin from 'generate-json-webpack-plugin'
+import FileManagerWebpackPlugin from 'filemanager-webpack-plugin'
+import optionGenerator from './webpack.common'
+import webpack from 'webpack'
 
 const outputDir = path.join(__dirname, '..', 'dist_dev')
-let manifest
+let manifest: any
 
 const options = optionGenerator(
   outputDir,
@@ -18,7 +17,12 @@ const options = optionGenerator(
 
 const manifestFirefoxName = 'manifest-firefox.json'
 // The manifest.json is different from Chrome's with add-on ID
-const firefoxManifestGeneratePlugin = new GenerateJsonPlugin(manifestFirefoxName, { ...manifest, browser_specific_settings: { gecko: { id: 'timer@zhy' } } })
+const firefoxManifestGeneratePlugin = new GenerateJsonPlugin(
+  manifestFirefoxName,
+  {
+    ...manifest, browser_specific_settings: { gecko: { id: 'timer@zhy' } }
+  }
+) as unknown as webpack.WebpackPluginInstance
 options.plugins.push(firefoxManifestGeneratePlugin)
 const firefoxDevDir = path.join(__dirname, '..', 'firefox_dev')
 // Generate FireFox dev files
@@ -33,7 +37,7 @@ options.plugins.push(
         }
       ]
     }
-  }),
+  }) as webpack.WebpackPluginInstance,
   new webpack.DefinePlugin({
     __VUE_OPTIONS_API__: false,
     __VUE_PROD_DEVTOOLS__: false