Core Editor CLI

Uma biblioteca CLI simples para auxiliar no desenvolvimento de plugins para o Core Editor.

O objetivo deste pacote é evitar a dificuldade de configurar todas as dependências e configurações para o desenvolvimento de plugins, centralizando e acelerando os passos necessários durante o processo.

• Criação rápida de projetos
• Não é necessário mexer nas configurações do Babel e Webpack

Plugin do 0 ao 100

Crie um plugin pronto para produção em alguns passos simples.

• Crie uma pasta para o seu plugin e inicie alguns passos preliminares

mkdir core-editor-my-plugin
cd core-editor-my-plugin
npm init -y
git init

• Instale o pacote

npm i -D core-editor-cli

• Inicie seu projeto de plugin seguindo alguns passos

npx core-editor-cli init

Você também pode pular todas as perguntas com a opção -y ou passar todas as respostas por meio de opções (para ver todas as opções disponíveis, execute npx core-editor-cli init --help)

npx core-editor-cli init -y --user=YOUR-GITHUB-USERNAME

• O comando irá criar o diretório src e vários outros arquivos dentro do seu projeto. O arquivo src/index.js será o ponto de entrada do seu plugin. Antes de começar a desenvolver seu plugin, execute o servidor de desenvolvimento e abra a URL que será exibida (por exemplo, o padrão é http://localhost:8080)

npx core-editor-cli serve

Se você precisar de uma porta personalizada, use a opção -p

npx core-editor-cli serve -p 8081

Nos bastidores, usamos o webpack-dev-server e você pode passar suas opções via CLI da seguinte forma

npx core-editor-cli serve --devServer='{"https": true}'

• Quando o desenvolvimento estiver concluído, você pode compilar seu plugin e gerar o arquivo minificado pronto para produção

npx core-editor-cli build

• Antes de publicar seu pacote, lembre-se de completar seu arquivo README.md com todas as opções, componentes, blocos disponíveis, etc. Para um melhor engajamento dos usuários, crie uma demonstração simples ao vivo usando serviços como JSFiddle, CodeSandbox, CodePen e vincule-a ao seu README. Para ajudar nesse processo, imprimiremos todo o HTML/CSS/JS necessário no seu README, de modo que será apenas uma questão de copiar e colar em algum desses serviços.

Customização

Customizar configuração do webpack

Se você precisar personalizar a configuração do webpack, pode criar o arquivo webpack.config.js no diretório raiz do seu projeto e exportar uma função, que deve retornar o novo objeto de configuração. Confira o exemplo abaixo.

// YOUR-PROJECT-DIR/webpack.config.js

// config é a configuração padrão
export default ({ config }) => {
    // Esta é a forma de distinguir o comando `build` do `serve`
    const isBuild = config.mode === 'production';

    return {
        ...config,
        module: {
            rules: [ { /* regra extra */ }, ...config.module.rules ],
        },
    };
}

Uso genérico da CLI

Mostrar todos os comandos disponíveis

core-editor-cli

Mostrar opções disponíveis para um comando

core-editor-cli COMMAND --help

Executar o comando

core-editor-cli COMMAND --OPT1 --OPT2=VALUE