"Se um trabalhador quiser fazer bem o seu trabalho, ele deve primeiro afiar suas ferramentas." - Confúcio, "Os Analectos de Confúcio. Lu Linggong"
Primeira página > Programação > Construindo pacotes NPM para CommonJS com dependências ESM

Construindo pacotes NPM para CommonJS com dependências ESM

Publicado em 14/08/2024
Navegar:560

Building NPM packages for CommonJS with ESM dependencies

TLDR

Você deve usar um empacotador como o esbuild, que compilará seu projeto e agrupará todas as suas dependências junto com ele para que não sejam importadas. Isso ignora o problema de incompatibilidade ESM/CommonJS.

Se você estiver impaciente, pode ir direto para o código com este exemplo de implementação.

Contexto

Enquanto me preparava para lançar meu novo projeto Token.js no fim de semana, me deparei com um problema bastante frustrante. Eu queria que meu pacote suportasse CommonJS além do ESM, mas tinha dependências puras do ESM. Os defensores do ESM puro por aí podem ficar bastante insatisfeitos com o que eu disse, mas se você estiver construindo um pacote NPM e quiser que ele seja amplamente utilizado, você ainda precisará oferecer suporte ao CommonJS em 2024.

Token.js é um SDK TypeScript simples que permite integrar 60 LLMs de 9 provedores diferentes (OpenAI, Anthropic, Cohere, etc). Plugue desavergonhado, dê uma olhada e me diga o que você acha se você gosta de IA generativa.

Agora, existem vários recursos online discutindo como construir projetos Javascript para ESM, CommonJS ou ambos. No entanto, tive problemas específicos para lidar com o fato de ter dependências que eram puro ESM. Achei isso muito difícil de lidar porque não estou familiarizado com empacotadores (trabalhei principalmente em back-ends de aplicativos da web) e não consegui encontrar um bom guia sobre o assunto.

Então, se alguém estiver enfrentando esse problema, aqui está a solução.

Guia

Instalar esbuild

Usaremos esbuild para o bundler.


yarn adicionar esbuild --save-dev
yarn add esbuild --save-dev
Crie um script de construção

Precisaremos de um script de construção simples para executar o esbuild e gerar os resultados.


importar esbuild de 'esbuild' const entrypoint = "" const tsconfig = "" const build = assíncrono () => { aguarde Promise.all([ //pacote para commonjs esbuild.build({ pontos de entrada: [ponto de entrada], pacote: verdadeiro, minificar: verdadeiro, formato: 'cjs', arquivo de saída: `./dist/index.cjs`, plataforma: 'nó', treeShaking: verdadeiro, tsconfig, }), ]) } construir()
yarn add esbuild --save-dev
Adicione um script de construção ao seu package.json

Execute com seu tempo de execução preferido.


"scripts": { "build": "vite-node ./scripts/build.ts", }
yarn add esbuild --save-dev
Eu pessoalmente adoro o vite-node. Então, se você quiser acompanhar exatamente, você precisará instalar isso:


yarn adicionar vite-node --save-dev
yarn add esbuild --save-dev
Construa seu projeto

construção do fio
yarn add esbuild --save-dev
Isso fará com que seu projeto seja compilado com esbuild e você verá um novo arquivo, dist/index.cjs, que é a compilação CommonJS do seu pacote.

Configurar ponto de entrada

Atualize seu package.json para apontar para seu ponto de entrada CommonJS.


"principal": "dist/index.cjs",
yarn add esbuild --save-dev
Bam! Pronto, você construiu seu pacote para CommonJS. Isso funcionará mesmo se você tiver dependências do ESM porque as dependências serão agrupadas

junto com seu pacote.

As dependências são incluídas na saída por causa do campo bundle: true quando esbuild é chamado.

Declarações TypeScript

Embora tecnicamente não seja obrigatório, você provavelmente também desejará declarações TypeScript que, infelizmente, esbuild não geram neste momento. Então, para gerar

esses, você vai querer usar tsc normal.

Atualize seu tsconfig.json

Adicionar essas opções ao seu arquivo tsconfig.json fará com que apenas as declarações TypeScript sejam geradas. Isso é exatamente o que queremos já que o resto do pacote

está sendo construído com esbuild.

"declaração": verdadeiro, "declarationDir": "./dist", "emitDeclarationOnly": verdadeiro
yarn add esbuild --save-dev
Atualize seu script de construção

"scripts": { "build:tsc": "yarn tsc -p tsconfig.json", "build": "vite-node ./scripts/build.ts && Yarn build:tsc", }
yarn add esbuild --save-dev
Pontos de entrada duplos

Este guia recomenda gerar apenas um único ponto de entrada CommonJS para seu pacote. Pessoalmente, acho que esta é a melhor opção por dois motivos:

    Minimiza o tamanho do pacote
  • Evita o risco de embalagem dupla
No entanto, esta não é a única opção. Você também pode publicar seu pacote com pontos de entrada duplos para CommonJS e ESM.

Atualize seu script de construção para incluir uma construção ESM

importar esbuild de 'esbuild' const entrypoint = "" const tsconfig = "" const build = assíncrono () => { aguarde Promise.all([ //pacote para commonjs esbuild.build({ pontos de entrada: [ponto de entrada], pacote: verdadeiro, minificar: verdadeiro, formato: 'cjs', arquivo de saída: `./dist/index.cjs`, plataforma: 'nó', treeShaking: verdadeiro, tsconfig, }), //pacote para ESM esbuild.build({ pontos de entrada: [ponto de entrada], pacote: verdadeiro, minificar: verdadeiro, formato: 'esm', arquivo de saída: `./dist/index.js`, plataforma: 'nó', treeShaking: verdadeiro, tsconfig, }), ]) } construir()
yarn add esbuild --save-dev
Atualize seu arquivo package.json para incluir pontos de entrada duplos

"principal": "dist/index.cjs", "módulo": "dist/index.js", "tipo": "módulo", "exportações": { ".": { "importar": "./dist/index.js", "require": "./dist/index.cjs", "tipos": "./dist/index.d.ts" } },
yarn add esbuild --save-dev
Código fonte

Declaração de lançamento Este artigo foi reproduzido em: https://dev.to/ryan_pate_f494c0931176673/how-to-build-npm-packages-for-commonjs-with-pure-esm-dependencies-38jm?1 Se houver alguma violação, entre em contato com study_golang @163.com excluir
Tutorial mais recente Mais>

Isenção de responsabilidade: Todos os recursos fornecidos são parcialmente provenientes da Internet. Se houver qualquer violação de seus direitos autorais ou outros direitos e interesses, explique os motivos detalhados e forneça prova de direitos autorais ou direitos e interesses e envie-a para o e-mail: [email protected]. Nós cuidaremos disso para você o mais rápido possível.

Copyright© 2022 湘ICP备2022001581号-3