theme development - How to diagnose wp-env environment problem

admin管理员组

文章数量:1303427

Short version

% node -v
v14.16.0
% npm -v
7.6.1
% wp-env --version
3.0.2
% npx @wordpress/create-block foo
...
Done: block "Foo" bootstrapped in the "foo" folder.
% cd foo
% wp-env start
✖ Error while running docker-compose command.
Creating e6bc9159b910bda3d9b0dae2e230eabd_cli_run ... done
mysqlcheck: Got error: 1130: Host '172.18.0.5' is not allowed to connect to this MariaDB server when trying to connect

I'm assuming I've messed up something in my node or wp-env environment, but am not sure where or for what to look.

Long Version

I'm new to all this (new dev environment, node, etc...), but was successfully developing a new block. Then I decided, well, this all seems to make sense, so next time I develop a theme, I'm going to try and do it with OOP and ESNext. After digging around a bit, I decided to start with this WordPress theme boilerplate.

I had to do some fiddling around to get it to work, and, honestly, I can't remember all the steps I took, but, it's still working. I can wp-env start and run start, from inside its directory, and it's just fine:

% wp-env start
WordPress development site started at http://localhost:8888/
WordPress test site started at http://localhost:8889/
MySQL is listening on port 55002

 ✔ Done! (in 10s 270ms)
% npm start

> [email protected] start
> npm run dev
...
Entrypoint main = runtime.js main.js
[0] [./src/scripts/index.js] 51 bytes {main} [built]
[0] [./src/scripts/lib/lazy-load.js] 233 bytes {main} [built]
[0]     + 1 hidden module
[0] [Browsersync] Proxying: http://localhost:8888
[0] [Browsersync] Access URLs:
[0]  ------------------------------------
[0]        Local: http://localhost:3000
[0]     External: http://192.168.1.6:3000
[0]  ------------------------------------
[0]           UI: http://localhost:3001
[0]  UI External: http://localhost:3001
[0]  ------------------------------------
[0] [Browsersync] Watching files...

So ... somehow in fiddling around to get this working, I broke the default wp-env stuff, but I have no idea how, nor how to go about finding what broke. Any suggestions on how to track this down?

Thanks!

(package.json dependencies and webpack.config.js from the working theme included below for completeness)

// package.json
...
  "devDependencies": {
    "@babel/core": "^7.11.6",
    "@babel/preset-env": "^7.11.5",
    "babel-loader": "^8.1.0",
    "babel-plugin-syntax-dynamic-import": "^6.18.0",
    "browser-sync": "^2.26.13",
    "browser-sync-webpack-plugin": "^2.2.2",
    "clean-webpack-plugin": "^3.0.0",
    "concurrently": "^5.3.0",
    "eslint": "^7.21.0",
    "eslint-config-airbnb-base": "^14.2.0",
    "eslint-config-prettier": "^6.11.0",
    "eslint-plugin-import": "^2.22.0",
    "eslint-plugin-prettier": "^3.1.4",
    "prettier": "2.2.1",
    "sass": "^1.32.8",
    "stylelint": "^13.11.0",
    "stylelint-config-sass-guidelines": "^7.1.0",
    "stylelint-order": "^4.1.0",
    "webpack": "^4.44.1",
    "webpack-cli": "^3.3.12"
  },
  "dependencies": {
    "lozad": "^1.16.0"
  }

and

// webpack.config.js

const path = require('path');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const BrowserSyncPlugin = require('browser-sync-webpack-plugin');

module.exports = ({ mode }) => {
  const isProduction = mode === 'production';

  const entry = './src/scripts/index.js';

  const output = {
    path: path.resolve('assets', 'scripts'),
    filename: '[name].js',
    publicPath: 'wp-content'
      .concat(
        path
          .join(__dirname, 'assets', 'scripts', '/')
          .split('wp-content')
          .pop()
      ),
  };

  const devtool = isProduction
    ? 'source-map'
    : 'inline-source-map';

  const module = {
    rules: [
      { test: /.js$/, exclude: /(node_modules)/, loader: 'babel-loader' },
    ],
  };

  const plugins = [
    new CleanWebpackPlugin(),
    new BrowserSyncPlugin({
      host: 'localhost',
      proxy: 'localhost:8888',
      port: 3000,
      injectChanges: true,
      notify: true,
      files: [
        {
          match: ['**/*.php', 'assets/scripts/*.js', 'assets/styles/*.css'],
          fn(event, file) {
            event === 'change'
            && file.split('.').pop() === 'css'
              ? this.reload('*.css')
              : this.reload();
          },
        },
      ],
    }, {
      reload: false,
    }),
  ];

  const optimization = {
    runtimeChunk: 'single',
    splitChunks: {
      cacheGroups: {
        vendor: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendors',
          chunks: 'all',
        },
      },
    },
  };

  return {
    entry,
    output,
    devtool,
    module,
    plugins,
    optimization,
    mode,
  };
};

本文标签： theme developmentHow to diagnose wpenv environment problem