기초작업 시작

.editorconfig

@@ -0,0 +1,13 @@
+# editorconfig.org
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false

.env

@@ -0,0 +1,4 @@
+# dev-server
+VITE_HOST="0.0.0.0"
+VITE_PORT="3000"
+VITE_OPEN_BROWSER="false"

.gitignore

@@ -1,4 +1,7 @@
 node_modules/
 
 .DS_Store
-.idea/
+.idea/
+.env.local
+yarn.lock
+package.lock.json

webpack.config.js → __webpack.config.js

@@ -1,5 +1,4 @@
 const path = require('path');
-const webpack = require('webpack');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const TerserJSPlugin = require('terser-webpack-plugin');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
@@ -65,9 +64,7 @@ const base = (env, options) => {
       hot: true,
       host: '0.0.0.0',
       port: options.port || 3000,
-      stats: { color: true },
       historyApiFallback: true,
-      noInfo: true,
     };
     result.plugins.push(new HtmlWebpackPlugin({
       template: './src/demo/index.html',

package.json

@@ -3,13 +3,12 @@
   "version": "1.1.5",
   "description": "Image resize for javascript",
   "main": "src/index.js",
+  "type": "module",
   "scripts": {
-    "dev": "webpack-dev-server --mode development --port 3000",
-    "prebuild": "rm -rf dist && rm -rf docs",
-    "build": "webpack --mode production",
-    "postbuild": "mkdir dist && cp docs/ImageResize.js dist",
-    "version-patch": "npm version patch",
-    "docs": "node_modules/.bin/http-server ./docs -s -p 3000"
+    "dev": "vite",
+    "prebuild": "rm -rf ./dist",
+    "build": "vite build",
+    "start": "vite preview"
   },
   "repository": {
     "type": "git",
@@ -33,22 +32,14 @@
     "url": "https://github.com/redgoose-dev/image-resize/issues"
   },
   "homepage": "https://github.com/redgoose-dev/image-resize",
+  "browserslist": [
+    "> 1%",
+    "last 2 versions"
+  ],
+  "dependencies": {},
   "devDependencies": {
-    "@babel/core": "^7.8.4",
-    "@babel/preset-env": "^7.8.4",
-    "babel-loader": "^8.0.6",
-    "css-loader": "^3.4.2",
-    "html-loader": "^0.5.5",
-    "html-webpack-plugin": "^3.2.0",
-    "http-server": "^0.12.1",
-    "mini-css-extract-plugin": "^0.9.0",
-    "optimize-css-assets-webpack-plugin": "^5.0.3",
-    "terser-webpack-plugin": "^2.3.5",
-    "webpack": "^4.41.6",
-    "webpack-cli": "^3.3.11",
-    "webpack-dev-server": "^3.10.3"
-  },
-  "dependencies": {
-    "jquery": "^3.4.1"
+    "@types/node": "^17.0.10",
+    "typescript": "^4.5.5",
+    "vite": "^2.7.13"
   }
 }

tsconfig.json

@@ -0,0 +1,34 @@
+{
+  "compilerOptions": {
+    "target": "esnext",
+    "module": "esnext",
+    "moduleResolution": "node",
+    "strict": true,
+    "baseUrl": ".",
+    "esModuleInterop": true,
+    "removeComments": true,
+    "allowJs": true,
+    "noUnusedLocals": false,
+    "noUnusedParameters": false,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "useDefineForClassFields": true,
+    "typeRoots": [
+      "./node_modules/@types"
+    ],
+    "types": [
+      "node",
+      "vite/client"
+    ]
+  },
+  "include": [
+    "src/**/*.ts",
+    "vite.config.ts"
+  ],
+  "exclude": [
+    "node_modules",
+    "dist",
+    "docs",
+    "src/**/*.js"
+  ]
+}

vite.config.ts

@@ -0,0 +1,24 @@
+import type { UserConfig, ConfigEnv } from 'vite';
+import { defineConfig, loadEnv } from 'vite';
+
+// docs: https://vitejs.dev/config
+
+const config = defineConfig(async ({ mode }: ConfigEnv): Promise<UserConfig> => {
+  const env = loadEnv(mode, process.cwd());
+  return {
+    server: {
+      host: env.VITE_HOST,
+      port: Number(env.VITE_PORT),
+      open: env.VITE_OPEN_BROWSER === 'true',
+      proxy: {
+        // https://vitejs.dev/config/#server-proxy
+        // '/api': {},
+      },
+    },
+    plugins: [
+      //
+    ],
+  };
+});
+
+export default config;