WordPress Sage 主题 - BrowserSync 与 Laragon

问题描述

我使用 Laragon 作为我的本地开发服务器，因为我通常发现自己在从事 Laravel 项目。它也非常适合通用 wordpress 开发。

我最近发现了一个由 Roots 创建的名为 Sage 的入门主题。此主题支持刀片、sass 和 browserSync。

现在，这个主题要求您使用 Yarn 编译资产，这一切都很好，但我有一个问题。

问题

当我运行 yarn:start 时，它尝试启动并运行 browserSync，但由于 SSL 错误而失败。这是因为在 Laragon 中，您可以设置 SSL，它将一些本地证书添加到浏览器中的信任库中。

本质上，您最终会得到非常好的 https://projectname.test，但是当 Sage 主题调用 yarn:start 时，它会执行以下操作：

"start": "webpack --hide-modules --watch --config resources/assets/build/webpack.config.js",

webpack.config 看起来像这样


'use strict'; // eslint-disable-line

const webpack = require('webpack');
const merge = require('webpack-merge');
const CleanPlugin = require('clean-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const StyleLintPlugin = require('stylelint-webpack-plugin');
const copyGlobsPlugin = require('copy-globs-webpack-plugin');
const FriendlyErrorsWebpackPlugin = require('friendly-errors-webpack-plugin');

const desire = require('./util/desire');
const config = require('./config');

const assetsFilenames = (config.enabled.cacheBusting) ? config.cacheBusting : '[name]';

let webpackConfig = {
  context: config.paths.assets,entry: config.entry,devtool: (config.enabled.sourceMaps ? '#source-map' : undefined),output: {
    path: config.paths.dist,publicPath: config.publicPath,filename: `scripts/${assetsFilenames}.js`,},stats: {
    hash: false,version: false,timings: false,children: false,errors: false,errorDetails: false,warnings: false,chunks: false,modules: false,reasons: false,source: false,publicPath: false,module: {
    rules: [

      { 
        test: /\.js$/,exclude: /node_modules/,loader: "babel-loader" 
      },{
        enforce: 'pre',test: /\.js$/,include: config.paths.assets,use: 'eslint',test: /\.(js|s?[ca]ss)$/,loader: 'import-glob',{
        test: /\.js$/,exclude: [/node_modules(?![/|\\](bootstrap|foundation-sites))/],use: [{
            loader: 'cache'
          }
        ],{
        test: /\.css$/,use: ExtractTextPlugin.extract({
          fallback: 'style',use: [{
              loader: 'cache'
            },{
              loader: 'css',options: {
                sourceMap: config.enabled.sourceMaps
              }
            },{
              loader: 'postcss',options: {
                config: {
                  path: __dirname,ctx: config
                },sourceMap: config.enabled.sourceMaps,],}),{
        test: /\.scss$/,{
              loader: 'resolve-url',{
              loader: 'sass',options: {
                sourceMap: config.enabled.sourceMaps,sourceComments: true,{
        test: /\.(ttf|otf|eot|woff2?|png|jpe?g|gif|svg|ico)$/,loader: 'url',options: {
          limit: 4096,name: `[path]${assetsFilenames}.[ext]`,include: /node_modules/,outputPath: 'vendor/',name: `${config.cacheBusting}.[ext]`,resolve: {
    modules: [
      config.paths.assets,'node_modules',enforceExtension: false,resolveLoader: {
    moduleExtensions: ['-loader'],externals: {
    jquery: 'jQuery',plugins: [
    new CleanPlugin([config.paths.dist],{
      root: config.paths.root,verbose: false,/**
     * It would be nice to switch to copy-webpack-plugin,but
     * unfortunately it doesn't provide a reliable way of
     * tracking the before/after file names
     */
    new copyGlobsPlugin({
      pattern: config.copy,output: `[path]${assetsFilenames}.[ext]`,manifest: config.manifest,new ExtractTextPlugin({
      filename: `styles/${assetsFilenames}.css`,allChunks: true,disable: (config.enabled.watcher),new webpack.ProvidePlugin({
      $: 'jquery',jQuery: 'jquery','window.jQuery': 'jquery',Popper: 'popper.js/dist/umd/popper.js',new webpack.LoaderOptionsPlugin({
      minimize: config.enabled.optimize,debug: config.enabled.watcher,stats: {
        colors: true
      },new webpack.LoaderOptionsPlugin({
      test: /\.s?css$/,options: {
        output: {
          path: config.paths.dist
        },context: config.paths.assets,new webpack.LoaderOptionsPlugin({
      test: /\.js$/,options: {
        eslint: {
          failOnWarning: false,failOnError: true
        },// new StyleLintPlugin({
    // failOnError: !config.enabled.watcher,// Syntax: 'scss',// }),new FriendlyErrorsWebpackPlugin(),};

/* eslint-disable global-require */
/** Let's only load dependencies as needed */

if (config.enabled.optimize) {
  webpackConfig = merge(webpackConfig,require('./webpack.config.optimize'));
}

if (config.env.production) {
  webpackConfig.plugins.push(new webpack.NoEmitOnErrorsPlugin());
}

if (config.enabled.cacheBusting) {
  const WebpackAssetsManifest = require('webpack-assets-manifest');

  webpackConfig.plugins.push(
    new WebpackAssetsManifest({
      output: 'assets.json',space: 2,writetodisk: false,assets: config.manifest,replacer: require('./util/assetManifestsFormatter'),})
  );
}

if (config.enabled.watcher) {
  webpackConfig.entry = require('./util/addHotMiddleware')(webpackConfig.entry);
  webpackConfig = merge(webpackConfig,require('./webpack.config.watch'));
}

/**
 * During installation via sage-installer (i.e. composer create-project) some
 * presets may generate a preset specific config (webpack.config.preset.js) to
 * override some of the default options set here. We use webpack-merge to merge
 * them in. If you need to modify Sage's default webpack config,we recommend
 * that you modify this file directly,instead of creating your own preset
 * file,as there are limitations to using webpack-merge which can hinder your
 * ability to change certain options.
 */
module.exports = merge.smartStrategy({
  'module.loaders': 'replace',})(webpackConfig,desire(`${__dirname}/webpack.config.preset`));

这反过来调用 webpack.config.watch，看起来像这样


const url = require('url');
const webpack = require('webpack');
const browserSyncPlugin = require('browsersync-webpack-plugin');

const config = require('./config');

const target = process.env.DEVURL || config.devUrl;

/**
 * We do this to enable injection over SSL.
 */
if (url.parse(target).protocol === 'https:') {
  process.env.NODE_TLS_REJECT_UNAUTHORIZED = 0;

  config.proxyUrl = config.proxyUrl.replace('http:','https:');
}

module.exports = {
  output: {
    pathinfo: true,publicPath: config.proxyUrl + config.publicPath,devtool: '#cheap-module-source-map',stats: false,plugins: [
    new webpack.optimize.OccurrenceOrderPlugin(),new webpack.HotModuleReplacementPlugin(),new webpack.NoEmitOnErrorsPlugin(),new browserSyncPlugin({
      target,open: config.open,proxyUrl: config.proxyUrl,watch: config.watch,delay: 500,};

如您所见，这会设置 browserSync。最后，它使用配置文件中的详细信息进行设置。


{
    "entry": {
     "main": [
        "./scripts/main.js","./styles/main.scss"
      ],"customizer": [
        "./scripts/customizer.js"
      ]
   },"publicPath": "/wp-content/themes/sage","devUrl": "https://newable.test","proxyUrl": "http://newable.test:8890","cacheBusting": "[name]_[hash:8]","watch": [
      "app/**/*.PHP","config/**/*.PHP","resources/views/**/*.PHP"
    ]
}

因此，运行 yarn:start 然后执行此操作。

但是，这会在我的浏览器中返回错误，因为 localhost 实际上没有 SSL 证书。

有没有办法在不禁用 SSL 的情况下解决这个问题？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

browser-sync laragon webpack webpack webpack wordpress-theming