Replace webpack with only esbuild

reduce node_modules size to only 18M
2022-12-04 20:17:56 +08:00
parent b808d4be99
commit c09e230972
34 changed files with 602 additions and 37643 deletions
@@ -0,0 +1,4 @@
+rm -rf build
+cp -raf public build
+./node_modules/.bin/esbuild src/index.jsx --bundle --minify --outfile=build/msw-open-music.js --sourcemap
+cat public/index.html | sed "s/%PUBLIC_URL%/$PUBLIC_URL/" > build/index.html
@@ -3,42 +3,12 @@
  "version": "1.2.0",
  "private": true,
  "dependencies": {
-    "@testing-library/jest-dom": "^5.15.0",
-    "@testing-library/react": "^11.2.7",
-    "@testing-library/user-event": "^12.8.3",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "react-router": "^6.3.0",
-    "react-router-dom": "^6.3.0",
-    "react-scripts": "^4.0.3",
-    "water.css": "^2.1.1",
-    "web-vitals": "^1.1.2"
+    "esbuild": "^0.15.17",
+    "react": "^18.2.0",
+    "react-router-dom": "^6.4.4",
+    "water.css": "^2.1.1"
  },
  "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject"
-  },
-  "eslintConfig": {
-    "extends": [
-      "react-app",
-      "react-app/jest"
-    ]
-  },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
-  },
-  "devDependencies": {
-    "@types/react": "^17.0.34"
+    "build": "bash ./build.sh"
  }
 }
@@ -6,36 +6,14 @@
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="description" content="Personal music streaming platform" />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/favicon.png" />
-    <!--
-      manifest.json provides metadata used when your web app is installed on a
-      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-    -->
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-    <!--
-      Notice the use of %PUBLIC_URL% in the tags above.
-      It will be replaced with the URL of the `public` folder during the build.
-      Only files inside the `public` folder can be referenced from the HTML.
-
-      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
-      work correctly both with client-side routing and a non-root public URL.
-      Learn how to configure a non-root public URL by running `npm run build`.
-    -->
-    <!-- Add to homescreen for Chrome on Android -->
+    <link rel="stylesheet" href="%PUBLIC_URL%/msw-open-music.css" />
    <meta name="mobile-web-app-capable" content="yes" />
    <title>MSW Open Music</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
-    <!--
-      This HTML file is a template.
-      If you open it directly in the browser, you will see an empty page.
-
-      You can add webfonts, meta tags, or analytics to this file.
-      The build step will place the bundled scripts into the <body> tag.
-
-      To begin the development, run `npm start` or `yarn start`.
-      To create a production bundle, use `npm run build` or `yarn build`.
-    -->
+    <script type="module" src="%PUBLIC_URL%/msw-open-music.js"></script>
  </body>
 </html>
@@ -1,3 +1,4 @@
+import * as React from 'react';
 import { HashRouter as Router, Routes, Route, NavLink } from "react-router-dom";
 import "./App.css";

@@ -1,6 +1,7 @@
-import { useEffect, useState } from "react";
-import { useNavigate } from "react-router";
-import { CalcReadableFilesizeDetail } from "./Common";
+import * as React from 'react';
+import {useEffect, useState} from "react";
+import {useNavigate} from "react-router";
+import {CalcReadableFilesizeDetail} from "./Common";
 import FfmpegConfig from "./FfmpegConfig";
 import FileDialog from "./FileDialog";
 import { Tr } from "../translate";
@@ -1,3 +1,4 @@
+import * as React from 'react';
 import { useState, useEffect, useContext } from "react";
 import { Tr, tr, langCodeContext } from "../translate";

@@ -1,3 +1,4 @@
+import * as React from 'react';
 import { useContext, useEffect, useState } from "react";
 import { useParams, useNavigate } from "react-router";
 import { tr, Tr, langCodeContext } from "../translate";
@@ -1,3 +1,4 @@
+import * as React from 'react';
 import { useState, useEffect, useContext } from "react";
 import { useParams, useNavigate } from "react-router";
 import { tr, Tr, langCodeContext } from "../translate";
@@ -1,3 +1,4 @@
+import * as React from 'react';
 import { useState, useEffect } from "react";
 import { Link } from "react-router-dom";
 import { convertIntToDateTime } from "./Common";
@@ -1,3 +1,4 @@
+import * as React from 'react';
 import { useEffect, useState } from "react";

 function FfmpegConfig(props) {
@@ -1,3 +1,4 @@
+import * as React from 'react';
 import { useNavigate } from "react-router";
 import { Tr } from "../translate";

@@ -1,3 +1,4 @@
+import * as React from 'react';
 import { useState } from "react";
 import { useNavigate } from "react-router";
 import { CalcReadableFilesize } from "./Common";
@@ -1,3 +1,4 @@
+import * as React from 'react';
 import {useNavigate, useParams} from "react-router";
 import {useContext, useEffect, useState} from "react";
 import {Tr, tr, langCodeContext} from "../translate";
@@ -1,3 +1,4 @@
+import * as React from 'react';
 import {useParams} from "react-router";
 import {useState, useEffect} from "react";
 import {useNavigate} from "react-router-dom";
@@ -1,3 +1,4 @@
+import * as React from 'react';
 import FileEntry from "./FileEntry";
 import { Tr } from "../translate";

@@ -1,3 +1,4 @@
+import * as React from 'react';
 import { useNavigate } from "react-router";
 import { Tr } from "../translate";

@@ -1,3 +1,4 @@
+import * as React from 'react';
 import { useContext, useEffect, useState } from "react";
 import { useNavigate } from "react-router-dom";
 import { useQuery } from "./Common";
@@ -1,3 +1,4 @@
+import * as React from 'react';
 import { useNavigate } from "react-router-dom";
 import { useContext, useState } from "react";
 import { Tr, tr, langCodeContext } from "../translate";
@@ -1,3 +1,4 @@
+import * as React from 'react';
 import { useNavigate } from "react-router";
 import Database from "./Database";

@@ -1,3 +1,4 @@
+import * as React from 'react';
 import { useState, useEffect } from "react";
 import { Link } from "react-router-dom";
 import { Tr } from "../translate";
@@ -1,3 +1,4 @@
+import * as React from 'react';
 import { useNavigate } from "react-router-dom";
 import { useContext, useState } from "react";
 import { tr, Tr, langCodeContext } from "../translate";
@@ -1,3 +1,4 @@
+import * as React from 'react';
 import { Link } from "react-router-dom";
 import { convertIntToDateTime } from "./Common";
 import { Tr, tr, langCodeContext } from "../translate";
@@ -1,3 +1,4 @@
+import * as React from 'react';
 import { useState, useEffect } from "react";
 import { useParams } from "react-router";
 import ReviewEntry from "./ReviewEntry";
@@ -1,3 +1,4 @@
+import * as React from 'react';
 import { useState, useEffect, useContext } from "react";
 import { useNavigate } from "react-router-dom";
 import { useQuery } from "./Common";
@@ -1,3 +1,4 @@
+import * as React from 'react';
 import { useContext, useEffect, useState } from "react";
 import { useNavigate } from "react-router-dom";
 import { useQuery } from "./Common";
@@ -1,3 +1,4 @@
+import * as React from 'react';
 import { useContext, useEffect, useState } from "react";
 import { useParams } from "react-router";
 import FilesTable from "./FilesTable";
@@ -1,3 +1,4 @@
+import * as React from 'react';
 import { useEffect, useState } from "react";
 import { Link } from "react-router-dom";
 import { Tr } from "../translate";
@@ -1,3 +1,4 @@
+import * as React from 'react';
 import { useState, useEffect, useContext } from "react";
 import { useParams } from "react-router";
 import ReviewEntry from "./ReviewEntry";
@@ -1,3 +1,4 @@
+import * as React from 'react';
 import { useEffect } from 'react';

 function UserStatus(props) {
@@ -1,18 +0,0 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import './index.css';
-import 'water.css';
-import App from './App';
-import reportWebVitals from './reportWebVitals';
-
-ReactDOM.render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>,
-  document.getElementById('root')
-);
-
-// If you want to start measuring performance in your app, pass a function
-// to log results (for example: reportWebVitals(console.log))
-// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
-reportWebVitals();
@@ -0,0 +1,12 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import './index.css';
+import 'water.css';
+import App from './App';
+
+ReactDOM.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+  document.getElementById('root')
+);
@@ -1,13 +0,0 @@
-const reportWebVitals = onPerfEntry => {
-  if (onPerfEntry && onPerfEntry instanceof Function) {
-    import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
-      getCLS(onPerfEntry);
-      getFID(onPerfEntry);
-      getFCP(onPerfEntry);
-      getLCP(onPerfEntry);
-      getTTFB(onPerfEntry);
-    });
-  }
-};
-
-export default reportWebVitals;
@@ -1,4 +1,5 @@
-import { createContext, renderToString } from "react";
+import * as React from 'react';
+import { createContext } from "react";
 import MAP_zh_CN from "./zh_CN";

 const LANG_OPTIONS = {