Webpack、gulp 和 wordpress 中的 frontstreet 框架

Question

我尝试将 https://github.com/themeblvd/frontstreet frontstreet 框架添加到 Wordpress。

我在 wp-content/themes/front-theme/js/frontstreet.js 中有预建资产 "frontstreet.js" 在同一本地化中，我将自定义 "scripts.js" 文件放入导入模块。为了测试，我输入警报

import $ from 'jquery';

alert("test");

我运行观看了 gulp 的网站，它运行正常，框架 CSS 类。但是没有警报，控制台也没有显示任何错误。我认为 gulp 没有看到我的 "scripts.js" 文件。

编辑在终端我有错误：

找不到条目模块中的错误：错误：无法解析“/Applications/MAMP/htdocs/front”中的“./wp-content/themes/front-theme/js/scritps.js”

Gulp 设置：

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(cb) {
    browserSync.reload();
    cb()
  });
  gulp.watch(settings.themeLocation + 'css/**/*.css', gulp.parallel('waitForStyles'));
  gulp.watch([settings.themeLocation + 'js/src/js/blocks/*.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()).pipe(browserSync.reload());
}))

gulp.task('waitForScripts', gulp.series('scripts', function(cb) {
  browserSync.reload();
  cb()
}))

Webpack 配置

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

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

设置文件

exports.themeLocation = './wp-content/themes/front-theme/';
exports.urlToPreview = 'http://localhost:8888/front/';

这是我的 Wordpress functions.php

// add frontstreet pre-built
    wp_enqueue_script('frontstreet-js', get_theme_file_uri('/js/frontstreet.js'), NULL, '1.0', true);

Answer 1

已解决。我的错误，但现在我明白了它是如何工作的。

那太乱了

我在 gulp 具有生成文件输出的同一文件夹中有旧的预构建文件。在 gulp 观察行中，我有框架块的 src。

Webpack、gulp 和 wordpress 中的 frontstreet 框架

Webpack, gulp and frontstreet framework in wordpress

javascript

wordpress

gulp

webpack