add webpack

2025-07-17 09:33:55 +08:00 · 2021-09-03 20:49:04 +08:00
parent 6cb60663b6
commit 0350ec09c4
8 changed files with 2157 additions and 27 deletions
--- a/.babelrc
+++ b/.babelrc
@@ -0,0 +1,18 @@
+{
+    "presets": [
+        [
+            "@babel/preset-env",
+            {
+                "targets": {
+                    "ie": 7,
+                    "edge": "17",
+                    "firefox": "60",
+                    "chrome": "67",
+                    "safari": "11.1"
+                },
+                "useBuiltIns": "usage",
+                "corejs": "3.8.3"
+            }
+        ]
+    ]
+}
--- a/package.json
+++ b/package.json
@@ -4,9 +4,19 @@
    "bin": "test/index.js",
    "scripts": {
        "test": "node test",
-        "xlsxTransform": "node utils/xlsxTransform.js data"
+        "xlsxTransform": "node utils/xlsxTransform.js data",
+        "dev": "webpack --mode development",
+        "build": "webpack --mode production"
    },
    "dependencies": {
+        "@babel/core": "^7.15.4",
+        "@babel/preset-env": "^7.15.4",
+        "babel-loader": "^8.2.2",
+        "core-js": "^3.17.2",
+        "webpack": "^5.51.2",
        "xlsx": "^0.17.0"
+    },
+    "devDependencies": {
+        "webpack-cli": "^4.8.0"
    }
 }
--- a/public/bundle.js
+++ b/public/bundle.js
--- a/src/index.js
+++ b/src/index.js
@@ -0,0 +1,14 @@
+import App from '../src/app.js';
+
+
+window.json = async fileName=>(await axios(`../data/${fileName}.json`)).data;
+
+// Pssst, I've created a github package - https://github.com/brookesb91/dismissible
+const hideBanners = (e) => {
+    document
+        .querySelectorAll(".banner.visible")
+        .forEach((b) => b.classList.remove("visible"));
+};
+
+const app = new App();
+app.initial();
--- a/view/index.html
+++ b/view/index.html
@@ -7,7 +7,7 @@
    <link rel="stylesheet" href="style.css">
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
-    <script>window.json = async fileName=>(await axios(`../data/${fileName}.json`)).data;</script>
+    <script src="../public/bundle.js"></script>
    <title>Document</title>
 </head>
 <body style="margin: 0; height: 100%">
@@ -32,17 +32,4 @@
  </div>
  <a href="https://github.com/VickScarlet/lifeRestart" class="github-corner" style="z-index: 9999;" aria-label="View source on GitHub"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:#151513; color:#fff; position: absolute; top: 0; border: 0; left: 0; transform: scale(-1, 1);" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style></a>
 </body>
-<script>
-    // Pssst, I've created a github package - https://github.com/brookesb91/dismissible
-    const hideBanners = (e) => {
-        document
-            .querySelectorAll(".banner.visible")
-            .forEach((b) => b.classList.remove("visible"));
-    };
-</script>
-<script type="module">
-    import App from '../src/app.js';
-    const app = new App();
-    app.initial();
-</script>
 </html>
--- a/view/test.html
+++ b/view/test.html
@@ -11,18 +11,38 @@
    <title>Document</title>
 </head>
 <body style="margin: 0; height: 100%">
-    <div id="main">
-        <div id="cnt" class="head">已重开1次</div>
-        <button id="rank">排行榜</button>
-        <div id="title">
-            人生重开模拟器<br>
-            <div style="font-size:1.5rem; font-weight:normal;">这垃圾人生一秒也不想呆了</div>
+  <div class="banners-container">
+    <div class="banners">
+      <div class="banner error">
+        <div class="banner-icon"><span class="iconfont">&#xe6a1;</span></div>
+        <pre class="banner-message">Oops! Something went wrong!</pre>
+        <div class="banner-close" onclick="hideBanners()"><span class="iconfont">&#xe6a8;</span></div>
      </div>
-        <button id="restart" class="mainbtn"><span class="iconfont">&#xe6a7;</span>立即重开</button>
-        <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-9857163863537600" crossorigin="anonymous"></script>
-        <!-- liferestart -->
-        <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-9857163863537600" data-ad-slot="3560523484" data-ad-format="auto" data-full-width-responsive="true"></ins>
-        <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
+      <div class="banner success">
+        <div class="banner-icon"><span class="iconfont">&#xe6a2;</span></div>
+        <pre class="banner-message">Everything was fine!</pre>
+        <div class="banner-close" onclick="hideBanners()"><span class="iconfont">&#xe6a8;</span></div>
      </div>
+      <div class="banner info">
+        <div class="banner-icon"><span class="iconfont">&#xe6a3;</span></div>
+        <pre class="banner-message">Here is some useful information</pre>
+        <div class="banner-close" onclick="hideBanners()"><span class="iconfont">&#xe6a8;</span></div>
+      </div>
+    </div>
+  </div>
+  <a href="https://github.com/VickScarlet/lifeRestart" class="github-corner" style="z-index: 9999;" aria-label="View source on GitHub"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:#151513; color:#fff; position: absolute; top: 0; border: 0; left: 0; transform: scale(-1, 1);" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style></a>
 </body>
+<script>
+    // Pssst, I've created a github package - https://github.com/brookesb91/dismissible
+    const hideBanners = (e) => {
+        document
+            .querySelectorAll(".banner.visible")
+            .forEach((b) => b.classList.remove("visible"));
+    };
+</script>
+<script type="module">
+    import App from '../src/app.js';
+    const app = new App();
+    app.initial();
+</script>
 </html>
--- a/webpack.config.cjs
+++ b/webpack.config.cjs
@@ -0,0 +1,41 @@
+const path = require('path');
+
+module.exports = {
+  entry: './src/index.js',
+  mode: 'production',
+  output: {
+    path: path.resolve(__dirname, 'public'),
+    filename: 'bundle.js',
+  },
+  // resolve: {
+  //   extensions: [".js"],
+  // },
+  module: {
+    rules: [{
+      test: /\.js$/,
+      exclude: /node_modules/,
+      use: {
+        loader: 'babel-loader',
+        options: {
+          presets: [
+            [
+              '@babel/preset-env',
+              {
+                "targets": {
+                  "ie": 7,
+                  "edge": "17",
+                  "firefox": "60",
+                  "chrome": "67",
+                  "safari": "11.1",
+                },
+                // 按需加载
+                "useBuiltIns": "usage",
+                "corejs": "3.8.3",
+              }
+            ]
+          ]
+        }
+      }
+    }]
+  }
+};
--- a/yarn.lock
+++ b/yarn.lock