Javascript 我完全沉迷于网页包模块/插件

更新

所以我通过修复import语句的文件路径修复了很多错误。现在我唯一的错误是：

$ yarn startwebp
asset bundle.js 224 KiB [compared for emit] (name: main)
orphan modules 78.3 KiB [orphan] 57 modules
runtime modules 997 bytes 4 modules
built modules 206 KiB [built]
  modules by path ./assets/ 203 KiB
    modules by path ./assets/js/ 32 KiB 5 modules
    modules by path ./assets/plugins/ 171 KiB
      ./assets/plugins/jquery/jquery.min.js 87.4 KiB [built] [code generated]
      ./assets/plugins/google-map/map.js 2.46 KiB [built] [code generated]
      ./assets/plugins/magnific-popup/jquery.magnific-popup.min.js 19.7 KiB [built] [code generated]
      ./assets/plugins/shuffle/shuffle.min.js 19.4 KiB [built] [code generated]
      ./assets/plugins/slick/slick.min.js 41.9 KiB [built] [code generated]
  ./node_modules/lozad/dist/lozad.min.js 3.02 KiB [built] [code generated]
  external "jQuery" 42 bytes [built] [code generated]

ERROR in ./assets/js/script.js 3:0-37
Module not found: Error: Can't resolve 'module' in '/home/elijah/GolandProjects/ReplayRLB/website/testsite1/assets/js'
resolve 'module' in '/home/elijah/GolandProjects/ReplayRLB/website/testsite1/assets/js'
  Parsed request is a module
  using description file: /home/elijah/GolandProjects/ReplayRLB/website/testsite1/package.json (relative path: ./assets/js)
    Field 'browser' doesn't contain a valid alias configuration
    resolve as module
      /home/elijah/GolandProjects/ReplayRLB/website/testsite1/assets/js/node_modules doesn't exist or is not a directory
      /home/elijah/GolandProjects/ReplayRLB/website/testsite1/assets/node_modules doesn't exist or is not a directory
      looking for modules in /home/elijah/GolandProjects/ReplayRLB/website/testsite1/node_modules
        single file module
          using description file: /home/elijah/GolandProjects/ReplayRLB/website/testsite1/package.json (relative path: ./node_modules/module)
            no extension
              Field 'browser' doesn't contain a valid alias configuration
              /home/elijah/GolandProjects/ReplayRLB/website/testsite1/node_modules/module doesn't exist
            .js
              Field 'browser' doesn't contain a valid alias configuration
              /home/elijah/GolandProjects/ReplayRLB/website/testsite1/node_modules/module.js doesn't exist
            .json
              Field 'browser' doesn't contain a valid alias configuration
              /home/elijah/GolandProjects/ReplayRLB/website/testsite1/node_modules/module.json doesn't exist
            .wasm
              Field 'browser' doesn't contain a valid alias configuration
              /home/elijah/GolandProjects/ReplayRLB/website/testsite1/node_modules/module.wasm doesn't exist
        /home/elijah/GolandProjects/ReplayRLB/website/testsite1/node_modules/module doesn't exist
      /home/elijah/GolandProjects/ReplayRLB/website/node_modules doesn't exist or is not a directory
      /home/elijah/GolandProjects/ReplayRLB/node_modules doesn't exist or is not a directory
      /home/elijah/GolandProjects/node_modules doesn't exist or is not a directory
      /home/elijah/node_modules doesn't exist or is not a directory
      /home/node_modules doesn't exist or is not a directory
      /node_modules doesn't exist or is not a directory

webpack 5.37.0 compiled with 1 error in 564 ms

首先：问题 首先，我使用以下方法将我的插件从配置链接转换为捆绑包：

    {{ "<!-- JS Plugins --> " | safeHTML }}
    {{ $mapJs := resources.Get "plugins/google-map/map.js"}}
    {{ $jqueryJs := resources.Get "plugins/jquery/jquery.min.js"}}
    {{ $magnificJs := resources.Get "plugins/magnific-popup/jquery.magnific-popup.min.js"}}
    {{ $shuffleJs := resources.Get "plugins/shuffle/shuffle.min.js"}}
    {{ $slickJs := resources.Get "plugins/slick/slick.min.js"}}
    {{ $scriptJs := resources.Get "js/script.js"}}
    {{ $boostingJs := resources.Get "js/pricing/boosting.js" }}
    {{ $coachingJs := resources.Get "js/pricing/coaching.js" }}
    {{ $placementsJs := resources.Get "js/pricing/placements.js" }}
    {{ $tourneyJs := resources.Get "js/pricing/tourneyTitle.js" }}
    {{ $jsbundle := slice $jqueryJs $slickJs $shuffleJs $magnificJs $mapJs $scriptJs | resources.Concat "/js/bundle.js"}}
    {{ $jsPricing := slice $boostingJs $coachingJs $placementsJs $tourneyJs | resources.Concat "/js/pricing.js"}}
    <script defer src="{{ $jsPricing.Permalink | relURL }}"></script>
    <script src="{{ $jsbundle.Permalink | relURL }}"></script>

对于未定义的required和module，我也收到了很多jshint错误，但今天早些时候我没有这些错误

package.json

好吧，有了这些插件，我试过一些东西，但出于某种原因，它总是说WebpackManifestPlugin不是什么东西。 还有，多个脚本是因为我爸爸开始做这个，我不想删除他所做的

js（又名主脚本）

我后来添加了这个，试图让require（）再次工作

import { createRequire } from "module";
const require = createRequire(import.meta.url);

Jshint告诉我：

Jshint:需要一个标识符，而看到的是“import”（一个保留字）。（W024）

它指的是

import.meta.url

第三：文件结构

├── bootstrap
├── css
├── FormMultiStep
├── images
├── js
│   ├── pricing
│   │   ├── boosting.js
│   │   ├── coaching.js
│   │   ├── placements.js
│   │   └── tourneyTitle.js
│   └── script.js
├── plugins
│   ├── @popperjs
│   │   └── a bunch of stuff. I use the popper.js that is in lib.
│   ├── google-map
│   │   └── map.js
│   ├── jquery
│   │   └── jquery.min.js
│   ├── lazy-load
│   │   └── lozad.min.js
│   ├── magnific-popup
│   │   ├── jquery.magnific-popup.min.js
│   │   └── magnific-popup.css
│   ├── shuffle
│   │   └── shuffle.min.js
│   ├── slick
│   │   ├── ajax-loader.gif
│   │   ├── fonts
│   │   ├── slick.css
│   │   └── slick.min.js
│   └── themify-icons
│       ├── fonts
│       └── themify-icons.css
└── scss
    ├── _base.scss
    ├── layout
    ├── main.scss
    ├── module
    │   ├── _PayPalBtn.scss
    │   └── TourneyTitle.scss
    ├── oldstyle.scss
    ├── page
    └── theme

最终：网页错误消息 在当前状态下，这是我运行

warn startwebp

脚本时得到的结果

如果你已经做到了这一点，无论你说什么，你都是了不起的。多谢各位

const path = require('path');
const WebpackManifestPlugin = require('webpack-manifest-plugin');

module.exports = {
    entry: './assets/js/script.js',
    output: {
        path: path.resolve('static', 'assets', 'js'),
        filename: 'bundle.js',
    },
    externals: {
        jquery: 'jQuery',
    },/*
    plugins: [
        new WebpackManifestPlugin({
            fileName:'../assets/manifest.json'
        })
    ]*/
};

{
  "name": "replayrlb",
  "version": "0.1.0",
  "description": "Website ReplayRLB.com",
  "main": "index.html",
  "license": "MIT",
  "repository": {
    "type": "git",
    "url": "git+https://github.com/blahblahblah"
  },
  "keywords": [
    "GoHtml5",
    "SCSS",
    "Bootstrap5",
    "GoHugo"
  ],
  "author": "Elijah Alexander Skinner",
  "scripts": {
    "startwebp": "webpack --mode=development --watch",
    "buildwebp": "webpack --mode=production",
    "test": "jest",
    "start": "hugo serve",
    "build": "hugo",
    "deploy": "./deploy.sh"
  },
  "dependencies": {
    "@fortawesome/fontawesome-free": "^5.15.3",
    "@popperjs/core": "^2.9.2",
    "animate.css": "^4.1.1",
    "bootstrap-icons": "^1.5.0",
    "jest": "^26.6.3",
    "lozad": "^1.16.0",
    "webpack-manifest-plugin": "^3.1.1"
  },
  "devDependencies": {
    "webpack": "^5.37.0",
    "webpack-cli": "^4.7.0"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]
}

import $ from "/plugins/jquery/jquery.min";
import "/plugins/@popperjs/core/lib/popper.js";
import "/plugins/google-map/map.js";
import "/plugins/magnific-popup/jquery.magnic-popup.min.js";
import Shuffle from "/plugins/shuffle";
import  "/plugins/slick/slick.min.js";
import lozad from "lozad";

/* ========================================================================= */
/*  jQuery load initialize
/* ========================================================================= */

window.$ = require('../plugins/jquery/jquery.min');
require('script.js');

/* ========================================================================= */
/*  shuffle load initialize
/* ========================================================================= */

const shuffleInstance = new Shuffle(document.getElementById('grid'), {
    itemSelector: '.js-item',
    sizer: '.js-shuffle-sizer',
});

/* ========================================================================= */
/*  lazy load initialize
/* ========================================================================= */

const observer = lozad(); // lazy loads elements with default selector as ".lozad"
observer.observe();

//Pricing Scripts
import "/pricing/boosting.js";
import "/pricing/tourneyTitle.js";
import "/pricing/placements.js";
import "js/pricing/coaching.js";

import { createRequire } from "module";
const require = createRequire(import.meta.url);

├── bootstrap
├── css
├── FormMultiStep
├── images
├── js
│   ├── pricing
│   │   ├── boosting.js
│   │   ├── coaching.js
│   │   ├── placements.js
│   │   └── tourneyTitle.js
│   └── script.js
├── plugins
│   ├── @popperjs
│   │   └── a bunch of stuff. I use the popper.js that is in lib.
│   ├── google-map
│   │   └── map.js
│   ├── jquery
│   │   └── jquery.min.js
│   ├── lazy-load
│   │   └── lozad.min.js
│   ├── magnific-popup
│   │   ├── jquery.magnific-popup.min.js
│   │   └── magnific-popup.css
│   ├── shuffle
│   │   └── shuffle.min.js
│   ├── slick
│   │   ├── ajax-loader.gif
│   │   ├── fonts
│   │   ├── slick.css
│   │   └── slick.min.js
│   └── themify-icons
│       ├── fonts
│       └── themify-icons.css
└── scss
    ├── _base.scss
    ├── layout
    ├── main.scss
    ├── module
    │   ├── _PayPalBtn.scss
    │   └── TourneyTitle.scss
    ├── oldstyle.scss
    ├── page
    └── theme

$ yarn startwebp                                             
asset bundle.js 15.7 KiB [emitted] (name: main)
runtime modules 997 bytes 4 modules
cacheable modules 8.56 KiB
  ./assets/js/script.js 5.54 KiB [built] [code generated]
  ./node_modules/lozad/dist/lozad.min.js 3.02 KiB [built] [code generated]

ERROR in ./assets/js/script.js 3:0-39
Module not found: Error: Can't resolve 'module' in '/home/elijah/GolandProjects/ReplayRLB/website/testsite1/assets/js'

ERROR in ./assets/js/script.js 7:0-43
Module not found: Error: Can't resolve '/plugins/jquery/jquery.min' in '/home/elijah/GolandProjects/ReplayRLB/website/testsite1/assets/js'

ERROR in ./assets/js/script.js 8:0-47
Module not found: Error: Can't resolve '/plugins/@popperjs/core/lib/popper.js' in '/home/elijah/GolandProjects/ReplayRLB/website/testsite1/assets/js'

ERROR in ./assets/js/script.js 9:0-36
Module not found: Error: Can't resolve '/plugins/google-map/map.js' in '/home/elijah/GolandProjects/ReplayRLB/website/testsite1/assets/js'

ERROR in ./assets/js/script.js 10:0-60
Module not found: Error: Can't resolve '/plugins/magnific-popup/jquery.magnic-popup.min.js' in '/home/elijah/GolandProjects/ReplayRLB/website/testsite1/assets/js'

ERROR in ./assets/js/script.js 11:0-39
Module not found: Error: Can't resolve '/plugins/shuffle' in '/home/elijah/GolandProjects/ReplayRLB/website/testsite1/assets/js'

ERROR in ./assets/js/script.js 12:0-38
Module not found: Error: Can't resolve '/plugins/slick/slick.min.js' in '/home/elijah/GolandProjects/ReplayRLB/website/testsite1/assets/js'

ERROR in ./assets/js/script.js 39:0-30
Module not found: Error: Can't resolve '/pricing/boosting.js' in '/home/elijah/GolandProjects/ReplayRLB/website/testsite1/assets/js'
Did you mean './/pricing/boosting.js'?
Requests that should resolve in the current directory need to start with './'.
Requests that start with a name are treated as module requests and resolve within module directories (node_modules).
If changing the source code is not an option there is also a resolve options called 'preferRelative' which tries to resolve these kind of requests in the current directory too.

ERROR in ./assets/js/script.js 40:0-34
Module not found: Error: Can't resolve '/pricing/tourneyTitle.js' in '/home/elijah/GolandProjects/ReplayRLB/website/testsite1/assets/js'
Did you mean './/pricing/tourneyTitle.js'?
Requests that should resolve in the current directory need to start with './'.
Requests that start with a name are treated as module requests and resolve within module directories (node_modules).
If changing the source code is not an option there is also a resolve options called 'preferRelative' which tries to resolve these kind of requests in the current directory too.

ERROR in ./assets/js/script.js 41:0-32
Module not found: Error: Can't resolve '/pricing/placements.js' in '/home/elijah/GolandProjects/ReplayRLB/website/testsite1/assets/js'
Did you mean './/pricing/placements.js'?
Requests that should resolve in the current directory need to start with './'.
Requests that start with a name are treated as module requests and resolve within module directories (node_modules).
If changing the source code is not an option there is also a resolve options called 'preferRelative' which tries to resolve these kind of requests in the current directory too.

ERROR in ./assets/js/script.js 42:0-32
Module not found: Error: Can't resolve 'js/pricing/coaching.js' in '/home/elijah/GolandProjects/ReplayRLB/website/testsite1/assets/js'

11 errors have detailed information that is not shown.
Use 'stats.errorDetails: true' resp. '--stats-error-details' to show it.

webpack 5.37.0 compiled with 11 errors in 160 ms