将js文件打包成一个文件答案

【问题标题】：Bundling js files into one file将js文件打包成一个文件
【发布时间】：2023-03-07 19:31:01
【问题描述】：

请帮助我将 js 文件捆绑到一个 js-bundled.js 文件中，并指导我更多关于 gulp 的知识，因为我对此一无所知。

Git Bash 中的错误

Khan@DESKTOP-9E1JPKM MINGW32 /c/xampp/htdocs/wordpress
$ gulp scripts
[20:34:46] Using gulpfile C:\xampp\htdocs\wordpress\gulpfile.js
[20:34:46] Starting 'scripts'...
Hash: 0c692b1c137b44dab1d2
Version: webpack 4.44.1
Time: 81ms
Built at: 10/04/2020 8:34:47 PM

ERROR in Entry module not found: Error: Can't resolve './wp-content/themes/custom_theme/wordpress/js/scripts.js' in 'C:\xampp\htdocs\wordpress'
[20:34:47] Finished 'scripts' after 231 ms

Webpack 配置文件

const path = require('path'),
settings = require('./settings');

module.exports = {
  entry: {
    App: settings.themeLocation + "js/scripts.js"
  },
  output: {
    path: path.resolve(__dirname, settings.themeLocation + "js"),
    filename: "scripts-bundled.js"
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      }
    ]
  },
  mode: 'development'
}

setting.js

exports.themeLocation = './wp-content/themes/custom_theme/wordpress/';
exports.urlToPreview = 'http://localhost:1337/wordpress';

gulpfile.js

    var gulp = require('gulp'),
    settings = require('./settings'),
    webpack = require('webpack'),
    browserSync = require('browser-sync').create(),
    postcss = require('gulp-postcss'),
    rgba = require('postcss-hexrgba'),
    autoprefixer = require('autoprefixer'),
    cssvars = require('postcss-simple-vars'),
    nested = require('postcss-nested'),
    cssImport = require('postcss-import'),
    mixins = require('postcss-mixins'),
    colorFunctions = require('postcss-color-function');
    
    gulp.task('styles', function() {
      return gulp.src(settings.themeLocation + 'css/style.css')
        .pipe(postcss([cssImport, mixins, cssvars, nested, rgba, colorFunctions, autoprefixer]))
        .on('error', (error) => console.log(error.toString()))
        .pipe(gulp.dest(settings.themeLocation));
    });
    
    gulp.task('scripts', function(callback) {
      webpack(require('./webpack.config.js'), function(err, stats) {
        if (err) {
          console.log(err.toString());
        }
    
        console.log(stats.toString());
        callback();
      });
    });
    
    gulp.task('watch', function() {
      browserSync.init({
        notify: false,
        proxy: settings.urlToPreview,
        ghostMode: false
      });
    
      gulp.watch('./**/*.php', function() {
        browserSync.reload();
      });
      gulp.watch(settings.themeLocation + 'css/**/*.css', gulp.parallel('waitForStyles'));
      gulp.watch([settings.themeLocation + 'js/modules/*.js', settings.themeLocation + 'js/scripts.js'], gulp.parallel('waitForScripts'));
    });
    
    gulp.task('waitForStyles', gulp.series('styles', function() {
      return gulp.src(settings.themeLocation + 'style.css')
        .pipe(browserSync.stream());
    }))
    
    gulp.task('waitForScripts', gulp.series('scripts', function(cb) {
      browserSync.reload();
      cb()
    }))



scripts.js

    import "../css/style.css"
    
    // Our modules / classes
    import MobileMenu from "./modules/MobileMenu"
    import HeroSlider from "./modules/HeroSlider"
    
    
    // Instantiate a new object using our modules/classes
    var mobileMenu = new MobileMenu()
    var heroSlider = new HeroSlider()
    
    // Allow new JS and CSS to load in browser without a traditional page refresh
    if (module.hot) {
      module.hot.accept()
    }



package.json


{
  "name": "fictional-university-lwc",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "gulpwatch": "gulp watch",
    "gulpstyles": "gulp styles",
    "gulpscripts": "gulp scripts"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.5.5",
    "@babel/preset-env": "^7.5.5",
    "autoprefixer": "^9.6.1",
    "babel-loader": "^8.0.6",
    "browser-sync": "^2.26.7",
    "gulp": "^4.0.2",
    "gulp-cli": "^2.2.0",
    "gulp-postcss": "^8.0.0",
    "postcss-color-function": "^4.1.0",
    "postcss-hexrgba": "^1.0.2",
    "postcss-import": "^12.0.1",
    "postcss-mixins": "^6.2.2",
    "postcss-nested": "^4.1.2",
    "postcss-simple-vars": "^5.0.2",
    "webpack": "^4.39.1",
    "webpack-cli": "^3.3.6"
  },
  "dependencies": {
    "jquery": "^3.4.1",
    "normalize.css": "^8.0.1",
    "slick-carousel": "^1.8.1"
  }
    
}

请帮助我了解如何为网站正确使用 gulp 和 webpack？我几个月前就开始学习了，我正在攻读计算机科学硕士学位。

【问题讨论】：

你的变量GoogleMap和类名GoogleMap一样，自然会报错已经定义了。将其更改为googleMap（与上面的其他变量一样）。
我已经这样做了，但仍然显示相同，我的意思是它给出了如下错误
./wp-content/themes/custom_theme/js/modules/HeroSlider.js 中的错误模块未找到：错误：无法解析 'C:\xampp\ 中的 '@glidejs/glide' htdocs\wordpress\wp-content\themes\custom_theme\js\modules' @ ./wp-content/themes/custom_theme/js/modules/HeroSlider.js 3:0-35 21:20-25 @ ./wp-content /themes/custom_theme/js/scripts.js
ERROR in ./wp-content/themes/custom_theme/css/style.css 2:0 Module parse failed: Unexpected character '@' (2:0) 您可能需要适当的加载程序来处理此文件类型，当前没有配置加载程序来处理此文件。见webpack.js.org/concepts#loaders
我不知道我应该和你分享什么

标签： javascript php node.js wordpress gulp

【解决方案1】：

我已经解决了这个问题，

首先，我缺少一个名为 glidejs 的模块（已安装）

其次，我正在将 style.css 导入 scritps.js 文件（已删除）

上面的错误是路径相关的问题。

【讨论】：