Desenvolvimento Avançado em WordPress: Como Construir seu Próximo Projeto com wp-scripts

O trabalho de desenvolvimento WordPress para agências pode ser competitivo mesmo nas melhores circunstâncias. Ele exige máxima eficiência e consistência em diversos projetos de clientes.

Independentemente da experiência que você tenha como desenvolvedor, o gerenciamento de todo um portfólio de temas e plugins personalizados ainda exige um esforço constante no que se refere à otimização do fluxo de trabalho. É aí que entra o wp-scripts: um poderoso conjunto de utilitários que pode revolucionar a forma como sua agência aborda o desenvolvimento do WordPress.

O conceito de um ‘processo de build’

Antes de analisarmos as especificidades do wp-scripts, vamos entender o conceito mais amplo do processo de build de desenvolvimento da web. Ele consiste em uma série de tarefas automatizadas para ajudar você a transformar seu código-fonte em um aplicativo ou site pronto para produção.

Por exemplo, há muitos trabalhos que se beneficiam da automação dessa forma:

• Compilação de JavaScript moderno em código compatível com o navegador.
• Transpilar linguagens de pré-processamento de CSS (Sass, por exemplo) para CSS padrão.
• Reduzir e otimizar ativos como JavaScript, CSS e mídia.
• Executar linters para detectar possíveis erros e aplicar padrões de codificação.
• Executar testes unitários para garantir uma melhor funcionalidade do código.

Esses são bons aspectos a serem automatizados em qualquer fluxo de trabalho de desenvolvimento, mas para as agências, o processo é igualmente crucial. Para começar, você pode manter a consistência em vários projetos (e na sua equipe).

Você também pode desenvolver e implantar em ciclos mais rápidos e manter todos os seus projetos aproveitando essa consistência, mesmo os mais complexos. Para o usuário final, o desempenho otimizado que você obtém refletirá na experiência geral dele.

Normalmente, sua agência pode “improvisar” processos de build personalizados usando ferramentas como Gulp, Grunt ou até mesmo processos manuais. No entanto, essas abordagens muitas vezes podem levar a inconsistências entre projetos, sem mencionar uma sobrecarga de manutenção significativa.

wp-scripts: Revolucione o fluxo de trabalho no desenvolvimento WordPress para agências

No contexto do WordPress, um processo de build pode proporcionar uma grande otimização no desenvolvimento de temas e plugins. Ele permite o uso de ferramentas e práticas modernas, garantindo a compatibilidade com a plataforma.

O pacote @wordpress/scripts – wp-scripts ao longo deste artigo, é uma coleção de arquivos de configuração e scripts que simplificam o processo de build para projetos WordPress.

A equipe do Make WordPress Core desenvolve e mantém o pacote, que é parte integrante dos Editores de Blocos e Sites. O melhor de tudo é que você também pode usá-lo para o desenvolvimento de temas e plugins personalizados.

Para abordar o desenvolvimento do WordPress em escala em uma agência, o wp-scripts será uma parte central do fluxo de trabalho. Ele é mais do que uma simples ferramenta de criação; é uma solução abrangente para projetos modernos de WordPress que se alinha à necessidade de um fluxo de trabalho de desenvolvimento sofisticado.

A principal funcionalidade do wp-scripts

Com práticas de JavaScript moderno cada vez mais integradas ao ecossistema WordPress, ferramentas de build padronizadas são indispensáveis. Um conjunto unificado de ferramentas de build como owp-scriptsbeneficia todo o ecossistema de desenvolvimento WordPress.

O wp-scripts oferece funcionalidades que tornam o desenvolvimento WordPress mais eficiente:

• Configuração zero. Você pode começar sem a necessidade de configurações complexas do Webpack.
• Suporte a JavaScript moderno. Seu código ES6 será transpilado para compatibilidade com o navegador e dará a você mais confiança em sua precisão.
• Processamento de CSS integrado. Se você usar pré-processadores CSS, como o Sass, terá suporte imediato.
• Ferramentas de qualidade de código. O pacote integra o ESLint e o Prettier para que você tenha estilo e qualidade de código consistentes.
• Utilitários de teste. Você tem o Jest disponível no pacote para testes de unidade e fácil execução.
• Hot reloading: Se você puder recarregar as alterações em tempo real, isso poderá acelerar o tempo de desenvolvimento.

Combinadas, essas funcionalidades oferecem várias vantagens cruciais para agências que gerenciam múltiplos projetos WordPress. Por exemplo, você pode padronizar o ambiente de desenvolvimento em todos os projetos e replicar o processo de build em novos projetos. O pacote também permite centralizar as dependências das ferramentas de build, tornando atualizações e patches de segurança mais fáceis de gerenciar.

No geral, o wp-scripts ajuda a minimizar problemas de compatibilidade, reduzir o tempo de configuração e eliminar muitos dos erros típicos que ocorrem em processos de build menos otimizados.

Comparando wp-scripts com um processo típico de desenvolvimento do WordPress

O desenvolvimento típico do WordPress geralmente envolve o uso de enfileiramento manual de scripts e estilos. Além disso, você provavelmente escreverá vanilla JavaScript ou jQuery e dependerá de ferramentas de build de terceiros ou de nenhum processo de build.

Em contrapartida, o wp-scripts oferece uma abordagem moderna e integrada em quase todas as áreas:

Elemento	Desenvolvimento típico	wp-scripts
JavaScript	Geralmente JavaScript comum ou jQuery	Suporte a ES6 e React
CSS	CSS direto ou pré-processadores básicos	Suporte para processamento de Sass e PostCSS
Processo de build	Uma configuração manual ou personalizada usando o Gulp, ou o Grunt	Configuração zero usando o webpack, integrado ao pacote.
Qualidade do código	Linting manual ou ferramentas separadas integradas ao seu editor de código	ESLint e Prettier são integrados aos scripts wp
Teste de unidade	Se não for uma etapa negligenciada, geralmente há uma configuração separada	O pacote integra o teste Jest

De modo geral, o wp-scripts oferece maior flexibilidade graças à sua integração com ferramentas que você talvez ainda não use. Por exemplo, o esforço de configurar o PostCSS, Webpack ou Jest pode ser algo que você não faz devido a restrições de tempo.

Como configurar seu ambiente de desenvolvimento para incorporar wp-scripts

O uso do wp-scripts tem seus próprios requisitos, mas é provável que você já use essas ferramentas. Se você precisar, instale o Node.js e o npm com um ambiente de desenvolvimento local do WordPress. O DevKinsta será uma boa solução, graças à execução no Docker e ao suporte aos ambientes de teste da Kinsta.

Se você já usa o pacote create-block para desenvolver plugins de WordPress Block, isso instala o wp-scripts juntamente com seus outros ativos. A partir daqui, você pode começar a configurar um projeto de desenvolvimento de pacote.

Configurando um novo projeto WordPress com wp-scripts

O trabalho que você realizar estará no diretório wp-content da sua instalação do WordPress. O subdiretório específico estará relacionado ao tipo de projeto que você criar: wp-content/themes para temas e wp-content/plugins para plugins!

Independentemente disso, a pasta do seu projeto deve incluir vários arquivos e diretórios:

• Um arquivo package.json.
• Um diretório de build.
• Um diretório src que também inclua um arquivo index.js.

Para criar um arquivo package.json, navegue até o diretório do seu projeto usando o Terminal ou o aplicativo de linha de comando. A execução do comando npm init levará você a um processo de configuração interativo, e o seu “ponto de entrada” deverá ser build/index.js:

Em seguida, instale o wp-scripts como uma dependência de desenvolvimento:

npm install @wordpress/scripts --save-dev

Você também deverá ver alguns diretórios e arquivos gerados automaticamente: node_modules e package-lock.json. Independentemente disso, agora você precisa fazer referência aos scripts predefinidos no arquivo package.json:

"scripts": {
  "build": "wp-scripts build",
  "start": "wp-scripts start",
}

Você provavelmente voltará a esse arquivo com frequência para adicionar outros scripts quando necessário. Por exemplo:

…

"lint:js": "wp-scripts lint-js",
"lint:css": "wp-scripts lint-style",
"lint:pkg-json": "wp-scripts lint-pkg-json",
"test": "wp-scripts test-unit-js"
…

Talvez você também precise enfileirar os ativos do tema ou do plug-in aqui e, em seguida, salvar as alterações.

Entendendo e usando o webpack com wp-scripts

Para empacotar os ativos de forma eficiente, o wp-scripts utiliza o webpack. Embora não seja necessário configurá-lo manualmente, compreender seu papel pode ajudar você a aproveitar melhor o wp-scripts. O webpack desempenha diversas funções importantes no seu setup:

• Ele ajuda a resolver as dependências entre seus módulos JavaScript.
• Você pode transpilar o JavaScript moderno para um código compatível com o navegador.
• Ele ajudará a processar e otimizar seus estilos.
• Você poderá gerar mapas de origem para depurar com mais facilidade.
• Ele pode ajudar você a criar pacotes minificados e prontos para produção.

Você já tem uma configuração padrão do Webpack em wp-scripts. Em casos mais complexos, no entanto, pode ser necessário criar configurações personalizadas.

Configuração avançada do Webpack para configurações de agências

Embora a configuração padrão do Webpack seja ideal para a maioria dos projetos de desenvolvimento, há momentos em que você precisa criar uma configuração para suas necessidades específicas. Por exemplo, você pode lidar com estruturas complexas de temas ou arquiteturas exclusivas de plugins. É nesse ponto que um arquivo webpack.config.js no diretório raiz do seu projeto:

const defaultConfig = require("@wordpress/scripts/config/webpack.config");

const path = require('path');


module.exports = {
  ...defaultConfig,
  entry: {
    main: path.resolve(__dirname, 'src/js/main.js'),
    admin: path.resolve(__dirname, 'src/js/admin.js'),
    // Add more entry points as needed
  },
  output: {
    filename: '[name].js',
    path: path.resolve(__dirname, 'dist'),
  },
  // Add custom loaders or plugins here
};

Essa configuração permite vários pontos de entrada, o que é particularmente útil para temas ou plugins que exigem scripts separados para diferentes partes do administrador ou frontend do WordPress. Dessa forma, você pode estender sua configuração padrão e manter os benefícios do wp-scripts.

Noções básicas sobre o uso de wp-scripts

Com um ambiente de desenvolvimento adequado e a estrutura correta de arquivos e pastas, você pode começar a usar o wp-scripts. Há alguns comandos básicos e fundamentais que ocuparão a maior parte do tempo que você dedicar a eles.

O comando start observa se há alterações em seus arquivos, recompila ativos em tempo real e fornece recarregamento a quente para que você tenha uma experiência de desenvolvimento mais suave:

npm run start

Você usa esse comando no início de um projeto para iniciar um servidor de desenvolvimento, embora ele não otimize o código compilado no arquivo build/index.js.

Quando você precisar implantar o projeto, o comando build compilará os ativos para produção:

npm run build

Quando você executa esse comando, ele realiza algumas tarefas. Por exemplo, ele transpila seu JavaScript, compila seu Sass e SCSS para CSS, minimiza todos os seus ativos e gera mapas de origem. No final, ele enviará tudo para o arquivo build/index.js. O processo de build também cria um arquivo build/index.asset.php para que você possa eliminar o cache.

O pacote wp-scripts também fornece vários comandos de linting para ajudar você a manter a alta qualidade do código:

• npm run lint:js. Você pode usar esse comando para aplicar linting aos seus arquivos JavaScript.
• npm run lint:css. Você pode usar o linting para identificar os arquivos CSS ou Sass.
• npm run lint:pkg-json. Isso valida o arquivo package.json.

Para testes de unidade, você simplesmente chama npm run test, que usa o Jest para executar o conjunto de testes.

Explorando os principais utilitários em wp-scripts

As tarefas básicas de build podem levar muito tempo, e os comandos típicos exigirão muita automação. No entanto, o site wp-scripts oferece um conjunto de utilitários sofisticados que atenderão às necessidades complexas do desenvolvimento do WordPress:

• Compilação avançada. Com configurações otimizadas, você pode transpilar o JavaScript moderno, inclusive os módulos ECMAScript (ESM) e Javascript XML (JSX), e compilar o Sass.
• Agrupamento inteligente. Aproveite recursos do webpack como code splitting e tree shaking para otimizar a entrega de ativos.
• Linting abrangente. Você pode aplicar padrões de codificação em arquivos JavaScript, CSS e package.json.
• Testes integrados. Com o Jest, você pode executar testes de unidade e relatórios de cobertura.
• Servidor de desenvolvimento. Você pode utilizar o hot reloading para desenvolvimento rápido em vários projetos.

Com essas funcionalidades, o wp-scripts não só melhora a eficiência do desenvolvimento, mas também permite personalizar o processo para atender às suas demandas específicas, seja no desenvolvimento de temas ou plugins.

Manipulando JSX e JavaScript moderno

Muitos projetos WordPress utilizam elementos modernos de JavaScript, como componentes React, funções de seta (arrow functions), destructuring, async/await e outros. Até mesmo partes do código principal do WordPress, como o Editor de Blocos, usam JavaScript moderno para construir sua funcionalidade.

No entanto, os navegadores não entendem nativamente essas sintaxes avançadas, portanto, é necessário mais trabalho para transpilar e compilar.

O JSX permite que você escreva código semelhante ao HTML no JavaScript, o que facilita a descrição da aparência das interfaces e de outros elementos. Isso pode melhorar a legibilidade e a manutenção, para começar. Você também pode acessar componentes poderosos do React para criar interfaces de usuário (UIs) dinâmicas.

O wp-scripts utiliza o compilador Babel para transpilar seu JavaScript moderno e JSX em código que os navegadores possam interpretar, simplificando a configuração para que você se concentre apenas em escrever código.

Você aproveita isso por meio do arquivo src/index.js . Confira este pequeno exemplo de como você pode implementar JSX e JavaScript moderno usando wp-scripts:

import { render } from '@wordpress/element';

// Modern JavaScript feature: Arrow function
const HelloWorld = () => {
    // Modern JavaScript feature: Template literal
    const greeting = `Hello, ${wp.data.select('core/editor').getCurrentPost().title}!`;    

    // JSX
    return (
        <div className="hello-world">
            <h1>{greeting}</h1>
            <p>This is a React component in WordPress!</p>
        </div>
    );
};

// Modern JavaScript feature: Optional chaining
const rootElement = document.getElementById('hello-world-root');
if (rootElement?.innerHTML) {
    render(<HelloWorld />, rootElement);
}

Você também precisa enfileirar o script no arquivo functions.php do seu tema ou no arquivo principal do plugin:

function enqueue_hello_world_script() {
    wp_enqueue_script(
        'hello-world-script',
        get_template_directory_uri() . '/build/index.js',
        ['wp-element'],
        filemtime(get_template_directory() . '/build/index.js'),
        true
    );
}

add_action('wp_enqueue_scripts', 'enqueue_hello_world_script');

Depois que você executar o comando npx wp-scripts build, o wp-scripts. Isso transpila seu JavaScript moderno e JSX, gerando o arquivo build/index.js compatível com o navegador.

Verificações de qualidade de código e linting avançado

O pacote wp-scripts inclui várias ferramentas para ajudar você a manter a qualidade do código e aplicar um estilo consistente em todos os seus projetos: Juntamente com o ESLint e o Prettier, você também pode acessar o stylelint para obter a identificação de CSS e SCSS.

A primeira etapa é adicionar os scripts de linting ao seu arquivo package.json:

"scripts": {
  "lint:js": "wp-scripts lint-js",
  "lint:css": "wp-scripts lint-style",
  "lint": "npm run lint:js && npm run lint:css"
}

Em seguida, crie arquivos de configuração personalizados no diretório raiz do seu projeto. Por exemplo, o ESLint exige que você trabalhe no arquivo .eslintrc.js. Este exemplo (em parte) impõe o uso de template literals para strings no código JavaScript:

…
module.exports = {
  extends: [
    'plugin:@wordpress/eslint-plugin/recommended',
  ],
  rules: {
    // Custom rules here
    'no-console': 'error',
    'react-hooks/exhaustive-deps': 'warn',
    'prefer-template': 'error',
  },
};
…

Para o stylelint, você edita o arquivo .stylelintrc.js:

…
module.exports = {
  extends: [
    '@wordpress/stylelint-config/scss',
  ],
  rules: {
    // Custom rules here
    'selector-class-pattern': '^[a-z]+(-[a-z]+)*$',
    'max-nesting-depth': 3,
  },
};
…

Se você mantém uma grande base de código em vários projetos, é fundamental ter um estilo de código consistente. Dessa forma, você pode estender as configurações padrão do ESLint e do stylelint para aplicar os padrões de codificação da sua agência.

A partir daí, você pode executar o site npm run lint para iniciar o processo de linting. Por exemplo, se o seu código contém:

D
console.log("Hello " + name + "!");

…a execução de npm run lint:js sinalizará um erro e sugerirá que você use um template literal:

const name = "World";
console.log(`Hello ${name}!`);

Essa é uma maneira inestimável de aplicar lint no código do seu tema ou pluginn de WordPress e oferece a você o escopo para adaptar os conjuntos de regras às suas necessidades e padrões específicos.

Testes unitários

Os testes unitários são cruciais para garantir a confiabilidade e manutenção da sua base de código. A ferramenta que o wp-scripts usa como estrutura de teste é o Jest.

Quando você executa o comando test, o Jest procura por arquivos com extensões .test.js ou .spec.js ou por arquivos em um diretório __tests__. Em seguida, ele executa os testes definidos nesses arquivos e relata os resultados.

Primeiro, você precisa fazer referência ao script de teste em seu arquivo package.json:

…
"scripts": {
  "test": "wp-scripts test-unit-js"
}
…

Se você precisar, crie um arquivo como src/utils.js:

…
export function capitalizeString(str) {
  return str.charAt(0).toUpperCase() + str.slice(1);
}

export function sum(a, b) {
  return a + b;
}
…

A partir daí, crie um arquivo de teste, como src/__tests__/utils.test.js:

import { capitalizeString, sum } from '../utils';

describe('capitalizeString', () => {
  it('capitalizes the first letter of a string', () => {
    expect(capitalizeString('hello')).toBe('Hello');
  });
  it('returns an empty string if given an empty string', () => {
    expect(capitalizeString('')).toBe('');
  });
});

describe('sum', () => {
  it('adds two numbers correctly', () => {
    expect(sum(2, 3)).toBe(5);
  });
  it('handles negative numbers', () => {
    expect(sum(-1, 1)).toBe(0);
  });
});

Quando você executar o comando npm run test, o wp-scripts encontrará e executará automaticamente todos os arquivos com a extensão .test.js. Você também pode estender a configuração padrão do Jest para dar suporte a qualquer necessidade de teste avançado, como cobertura de teste:

// jest.config.js
const defaultConfig = require('@wordpress/scripts/config/jest-unit.config');
module.exports = {
  ...defaultConfig,
  setupFilesAfterEnv: ['<rootDir>/tests/setupTests.js'],
  collectCoverageFrom: [
    'src/**/*.js',
    '!src/tests/**/*.js',
    '!src/vendor/**/*.js',
  ],
  coverageThreshold: {
    global: {
      branches: 80,
      functions: 80,
      lines: 80,
      statements: 80,
    },
  },
};

Essa configuração adiciona um arquivo de configuração personalizado, especifica os arquivos a serem incluídos nos relatórios de cobertura e define os limites de cobertura para garantir uma cobertura de teste abrangente em todos os seus projetos. Quando você executar esses testes, o Jest fornecerá uma saída que mostrará todos os testes aprovados e reprovados.

Expandir as capacidades dos seus testes unitários dessa maneira pode oferecer uma melhoria significativa na qualidade e confiabilidade de seus temas e plugins WordPress, além de otimizar todo o seu processo de desenvolvimento.

Como integrar wp-scripts em seus fluxos de trabalho

O escopo do uso de wp-scripts é tão amplo quanto você precisar. Para ilustrar isso, vamos analisar algumas abordagens rápidas que você pode adotar ao usar o wp-scripts para automatizar tarefas típicas.

Criando templates reutilizáveis para projetos

Você provavelmente precisará iniciar novos projetos com frequência — talvez até diariamente. Criar um template personalizado pré-configurado com o wp-scripts pode economizar muito tempo de configuração.

Você pode começar com um projeto base: um novo tema ou plugin WordPress que inclua sua configuração do wp-scripts:

mkdir my-agency-base-theme
cd my-agency-base-theme
npm init -y
npm install --save-dev @wordpress/scripts

Em seguida, configure a estrutura do projeto e crie os diretórios e arquivos necessários:

mkdir src build
touch src/index.js src/style.scss
touch functions.php style.css

Nesse ponto, você configura wp-scripts e atualiza o arquivo package.json com os comandos relevantes:

{
  "scripts": {
    "build": "wp-scripts build",
    "start": "wp-scripts start",
    "lint:js": "wp-scripts lint-js",
    "lint:css": "wp-scripts lint-style",
    "test": "wp-scripts test-unit-js"
  }
}

Você pode expandir isso para criar configurações para o webpack, ESLint e stylelint.

Para tornar esse template reutilizável e de fácil acesso, um repositório do GitHub é ideal. Por exemplo, considere uma origem remota de https://github.com/your-agency/theme-template.git.

Ao iniciar um novo projeto, você pode executar um comando simples:

npx create-wordpress-theme@latest my-new-theme --template your-agency/theme-template

Isso clonará seu repositório de templates e configurará um novo tema com sua configuração predefinida de wp-scripts.

Você pode personalizar ainda mais o template adicionando código boilerplate específico da agência, como funções ou componentes comumente usados. É importante manter esse repositório de templates atualizado, utilizando a versão mais recente do wp-scripts e implementando todas as melhorias no fluxo de trabalho que você decidir.

Controle de versão e colaboração

Você pode fazer mais quando se trata de wp-scripts e trabalhar com controle de versão. No entanto, muitas vezes, você deve implementar algumas práticas típicas para garantir que a qualidade do código seja alta:

• Inclua package.json e package-lock.json no controle de versão. Isso garante que todos os membros da equipe usarão as mesmas dependências.
• Certifique-se de que você incluiu artefatos de build, como /build e /node_modules, no arquivo .gitignore.
• Certifique-se de fazer referência a todos os scripts de que você precisa no arquivo package.json antes de confirmá-lo.
• Considere a possibilidade de usar um arquivo .nvmrc para especificar a versão correta do Node.js para o seu projeto.

Você pode optar por implementar hooks de pré-commit usando ferramentas como o Husky. Essa é uma ótima maneira de executar um linter antes de cada confirmação, como neste exemplo:

…
"husky": {
    "hooks": {
        "pre-commit": "npm run lint:js && npm run lint:css"
    }
}
…

Dessa forma, você pode garantir que o lint e os testes sejam executados automaticamente antes de fazer commits e pushes. Essa é outra maneira de você manter a qualidade do código em toda a sua equipe.

Integração contínua e implantação contínua (CI/CD)

Ao integrar o wp-scripts ao seu pipeline de CI/CD, você pode simplificar o processo de implantação de temas e plugins. O GitHub Actions é apenas uma maneira de você integrar isso à sua configuração do wp-scripts.

A primeira etapa é criar um arquivo de fluxo de trabalho dedicado em um diretório de fluxos de trabalho do seu repositório:

name: CI/CD

on:
  push:
    branches: [ main ]
  pull_request:
    branches: [ main ]
jobs:
  build-and-test:
    runs-on: ubuntu-latest
    steps:
    - uses: actions/checkout@v2
    - name: Use Node.js
      uses: actions/setup-node@v2
      with:
        node-version: '14'
    - name: Cache dependencies
      uses: actions/cache@v2
      with:
        path: ~/.npm
        key: ${{ runner.OS }}-node-${{ hashFiles('**/package-lock.json') }}
    - name: Install dependencies
      run: npm ci
    - name: Run linters
      run: |
        npm run lint:js
        npm run lint:css
    - name: Run tests
      run: npm run test
    - name: Build
      run: npm run build
    - name: Deploy
      if: github.ref == 'refs/heads/main'
      run: |
        # Add your deployment script here
        # For example, using rsync to a remote server:
        # rsync -avzc --delete ./build/ [email protected]:/path/to/wp-content/themes/your-theme/

A etapa de implantação pode variar dependendo do seu provedor de hospedagem. Você pode usar o rsync, integrar-se a serviços como o DeployHQ ou o Buddy, ou optar por uma integração simples com cURL. Caso sua implantação exija senhas ou chaves, elas devem ser adicionadas como secrets nas configurações do repositório do GitHub.

Esse fluxo de trabalho executa linters, testes e cria seu projeto em cada push e pull request. O melhor de tudo é que ele é implantado somente quando você envia alterações para a branch principal.

Criando uma ferramenta de linha de comando (CLI) personalizada

Se você precisar de ferramentas personalizadas, o site wp-scripts pode ajudar. Por exemplo, talvez você queira implantar uma ferramenta de CLI personalizada que atenda às necessidades da sua agência.

Em alguns casos, sua ferramenta precisará de algumas dependências:

npm install @wordpress/scripts commander chalk

Aqui, o Commander analisa os argumentos da linha de comando e o chalk melhora a exibição visual do texto de saída.

A partir daqui, você pode começar a codificar a ferramenta aproveitando o wp-scripts. Aqui está um exemplo de como esse arquivo ficaria:

#!/usr/bin/env node
const { program } = require('commander');
const { spawn } = require('child_process');
const path = require('path');
const chalk = require('chalk');

const wpScripts = path.resolve(__dirname, './node_modules/.bin/wp-scripts');

const runWpScripts = (script, args) => {
  console.log(chalk.blue(`Running wp-scripts ${script}...`));
  const result = spawn(wpScripts, [script, ...args], { stdio: 'inherit' });
  result.on('exit', (code) => {
    if (code !== 0) {
      console.log(chalk.red(`wp-scripts ${script} failed with code ${code}`));
    }
  });
};

program
  .version('1.0.0')
  .description('Custom WordPress development CLI for Agency XYZ');

program
  .command('build')
  .description('Build the project')
  .action(() => runWpScripts('build'));

program
  .command('start')
  .description('Start the development server')
  .action(() => runWpScripts('start'));

program
  .command('lint')
  .description('Lint JavaScript and CSS files')
  .action(() => {
    runWpScripts('lint-js');
    runWpScripts('lint-style');
  });

program
  .command('test')
  .description('Run unit tests')
  .action(() => runWpScripts('test-unit-js'));

program
  .command('deploy')
  .description('Deploy the project')
  .action(() => {
    console.log(chalk.green('Deploying project...'));
    // Add your deployment logic here
    // For example:
    // spawn('rsync', ['-avz', 'build/', 'user@server:/path/to/wordpress/wp-content/themes/your-theme/']);
  });

program.parse(process.argv);

Adicionar o campo bin ao seu arquivo package.json permite que você transforme a ferramenta CLI em um executável:

…
{
  "name": "agency-wp-cli",
  "version": "1.0.0",
  "bin": {
    "agency-wp": "./cli.js"
  },
  // ... other fields
}
…

Para vincular a CLI a uma instalação local, você pode simplesmente executar npm link. Agora, você pode testar a CLI no aplicativo de Terminal:

agency-wp build
agency-wp lint
agency-wp deploy

Você deve publicar a ferramenta em um registro npm privado para que outros membros da equipe possam instalá-la quando quiserem:

npm publish --registry=https://your-private-registry.com

Quando precisar dela, você só precisará executar npm install --save-dev agency-wp-cli para instalar a ferramenta. A partir daí, você pode fazer referência à CLI em package.json:

{
  "scripts": {
    "build": "agency-wp build",
    "start": "agency-wp start",
    "lint": "agency-wp lint",
    "test": "agency-wp test",
    "deploy": "agency-wp deploy"
  }
}

Ao criar e usar uma ferramenta como essa, você garante que todos na sua agência usem os mesmos comandos e processos. Isso pode reduzir as inconsistências e otimizar ainda mais o fluxo de trabalho de desenvolvimento WordPress.

Otimização de desempenho

Quando você gerencia vários sites WordPress de alto tráfego, a otimização do desempenho se torna crucial para o seu desempenho. Há várias técnicas avançadas que o wp-scripts pode ajudar você a implementar.

Divisão avançada de código (Advanced Code Splitting)

Por exemplo, a divisão de código permite que você divida seu pacote JavaScript em partes menores, que podem ser carregadas sob demanda. Isso pode aumentar o tempo de carregamento inicial, especialmente para aplicativos grandes.

Primeiro, modifique seu arquivo webpack.config.js para ativar a divisão de código:

const defaultConfig = require('@wordpress/scripts/config/webpack.config');

module.exports = {
  ...defaultConfig,
  entry: {
    main: './src/index.js',
    admin: './src/admin.js',
  },
  output: {
    filename: '[name].js',
    chunkFilename: '[name].[contenthash].js',
  },
  optimization: {
    ...defaultConfig.optimization,
    splitChunks: {
      chunks: 'all',
      minSize: 0,
      cacheGroups: {
        vendor: {
          test: /[\/]node_modules[\/]/,
          name(module) {
            const packageName = module.context.match(/[\/]node_modules[\/](.*?)([\/]|$)/)[1];
            return `vendor.${packageName.replace('@', '')}`;
          },
        },
      },
    },
  },
};

Em todo o seu código JavaScript, você usa importações dinâmicas para dividi-lo em partes menores:

// Instead of: import { heavyFunction } from './heavyModule';

button.addEventListener('click', () => {
  import('./heavyModule').then(module => {
    module.heavyFunction();
  });
});

Você também precisa enfileirar cada divisão em seus arquivos do WordPress:

function enqueue_split_scripts() {
  $asset_file = include(get_template_directory() . '/build/index.asset.php');  

  wp_enqueue_script('main', get_template_directory_uri() . '/build/main.js', $asset_file['dependencies'], $asset_file['version'], true);
  wp_enqueue_script('admin', get_template_directory_uri() . '/build/admin.js', $asset_file['dependencies'], $asset_file['version'], true);
}
add_action('wp_enqueue_scripts', 'enqueue_split_scripts');

Isso deve reduzir os tempos de carregamento sem exigir muito esforço de implementação.

Tree Shaking

No contexto do JavaScript, o tree shaking é a técnica usada para eliminar código não utilizado. Tanto o wp-scripts quanto o webpack realizam tree shaking para builds de produção, mas é possível otimizá-lo ainda mais. O processo pode ser mais complexo do que descrito aqui, mas é importante garantir o uso de sintaxe ES6 de import e export.

// Good for tree shaking
export function usedFunction() { /* ... */ }

// Bad for tree shaking
module.exports = {
  usedFunction: function() { /* ... */ },
};

Em seguida, especifique os arquivos com efeitos colaterais “side effects”…

{
  "name": "your-package",
  "sideEffects": ["*.css", "*.scss"]
}

…ou marque como isento de efeitos colaterais “side effects”:

{
  "name": "your-package",
  "sideEffects": false
}

Algumas bibliotecas maiores não suportam tree shaking, assim como outras. Nesses casos, você deve usar um plugin específico para essa tarefa:

npm install --save-dev babel-plugin-transform-imports

Isso também significa que você deve atualizar os arquivos de configuração do babel para obter uma instalação ideal e sem erros.

Otimização de ativos

O processo de build do wp-scripts minimizará os arquivos CSS e JavaScript para você, e você também pode levar isso adiante. Por exemplo, você pode instalar um plugin específico de otimização de imagem:

npm install --save-dev imagemin-webpack-plugin

Depois de adicionar isso ao seu arquivo de configuração do Webpack, você pode usar dicas de recursos adicionando o código correto ao seu arquivo functions.php ou ao arquivo principal do plugin:

function add_resource_hints( $urls, $relation_type ) {
  if ( 'preconnect' === $relation_type ) {
    $urls[] = 'https://fonts.googleapis.com';
    $urls[] = 'https://fonts.gstatic.com';
  }
  return $urls;
}

add_filter( 'wp_resource_hints', 'add_resource_hints', 10, 2 );

Uma tarefa como essa mostra a flexibilidade que você tem com o wp-scripts, na medida em que pode adaptá-lo às necessidades de sua agência ou projeto.

Análise do tamanho do pacote

Compreender a composição do seu pacote é fundamental para a otimização. Com o wp-scripts, você pode facilitar isso com o sinalizador --analyze.

npm run build -- --analyze

A primeira etapa é adicionar o script relevante ao seu arquivo package.json:

{
  "scripts": {
    "analyze": "wp-scripts build --analyze"
  }
}

Quando você executar o comando analyze, ele gerará um relatório que mostra o tamanho de cada módulo no seu pacote. Essa implementação simples ajuda a identificar áreas para otimização.

Implementando o Critical CSS

O Critical CSS do seu site é o CSS mínimo necessário para carregar o conteúdo acima da dobra (above-the-fold). Inserir esse CSS inline pode melhorar o tempo de carregamento percebido.

Para isso, será necessário usar o plugin Critical CSS do Webpack:

npm install --save-dev critical-css-webpack-plugin

A próxima tarefa é atualizar seu arquivo de configuração do Webpack para fazer referência ao plugin:

const CriticalCssPlugin = require('critical-css-webpack-plugin');
const defaultConfig = require('@wordpress/scripts/config/webpack.config');

module.exports = {
  ...defaultConfig,
  plugins: [
    ...defaultConfig.plugins,
    new CriticalCssPlugin({
      base: 'dist/',
      src: 'index.html',
      target: 'styles/critical.css',
      extract: true,
      inline: true,
      minify: true,
      dimensions: [
        {
          height: 500,
          width: 300,
        },
        {
          height: 900,
          width: 1300,
        },
      ],
    }),
  ],
};

Para usá-lo, você precisa adicionar um snippet ao seu arquivo header.php:

<style>
  <?php echo file_get_contents(get_template_directory() . '/build/styles/critical.css'); ?>
</style>

Esse processo essencialmente extrai e insere o Critical CSS inline, permitindo um carregamento inicial mais rápido. Ele gera o CSS crítico para tamanhos específicos de viewport, o que pode melhorar significativamente o tempo de carregamento percebido dos seus temas.

Resumo

Para o desenvolvimento em agências, o wp-scripts pode ser uma ferramenta poderosa que melhora significativamente seu fluxo de trabalho em projetos de temas e plugins. Ao fornecer um processo de build padronizado, suporte a JavaScript moderno e ferramentas integradas de testes e linting, o wp-scripts permite que você se concentre na criação de projetos WordPress de alta qualidade enquanto automatiza algumas das tarefas mais importantes.

O uso do wp-scripts não apenas ajuda você a acompanhar as práticas modernas de desenvolvimento, mas também posiciona sua agência na vanguarda do desenvolvimento WordPress, preparada para enfrentar os desafios e aproveitar as oportunidades que surgirem.

O wp-scripts oferece a funcionalidade e o alcance de que você precisa para os projetos de desenvolvimento da sua agência? Compartilhe seus pensamentos conosco na seção de comentários abaixo!