Entrar Ainda não tem acesso?
1
resposta

[Dúvida] Como importar uma biblioteca, via npm, em um projeto javascript

por Gabriel Santichio
| 198.1k xp | 13 posts
Analista de Desenvolvimento

Estou fazendo o challenge da Alura, o primeiro do front-end, e optei por usar HTML, CSS e JavaScript puro, porem preciso importar uma biblioteca chamada Highlight.js,

Comecei criando meu main.js e importei com os seguintes comandos:

import hljs from 'highlight.js/lib/core';
import javascript from 'highlight.js/lib/languages/javascript';
import html from 'highlight.js/lib/languages/html';
import css from 'highlight.js/lib/languages/css';

no index.html importei o script da seguinte forma:

(...)
 <script src="./js/main.js" type="module"></script>
 (...)

Porem quando abro no navegador, aparece o seguinte erro no console:

Uncaught TypeError: Failed to resolve module specifier "highlight.js/lib/core". Relative references must start with either "/", "./", or "../".

minha duvida é, como importar essa biblioteca sendo que nao usei o comando npm init?

1 resposta
por Lorena Garcia
| 8288.1k xp | 12128 posts
Alura Scuba Team Suporte Educacional

Oi Gabriel, tudo bem?

Pelo que entendi, você está tentando importar a biblioteca Highlight.js em seu projeto JavaScript, mas está encontrando alguns problemas.

O erro que você está vendo é porque você está tentando importar módulos NPM diretamente em seu arquivo JavaScript sem ter inicializado o NPM em seu projeto. O NPM é um gerenciador de pacotes para a linguagem de programação JavaScript que facilita a instalação, atualização e uso de bibliotecas de terceiros em seus projetos.

Para resolver o problema, você precisará inicializar o NPM em seu projeto e instalar a biblioteca Highlight.js. Aqui estão as etapas que você pode seguir:

  1. Abra o terminal na pasta do seu projeto.
  2. Digite npm init -y para inicializar o NPM em seu projeto. Isso criará um arquivo package.json em seu projeto.
  3. Em seguida, instale a biblioteca Highlight.js digitando npm install highlight.js no terminal. Isso instalará a biblioteca em seu projeto e adicionará uma entrada para ela no arquivo package.json.

Depois de ter feito isso, você poderá importar a biblioteca Highlight.js em seu arquivo JavaScript da seguinte maneira:

import hljs from 'highlight.js';

E para importar os idiomas que você precisa, você pode fazer assim:

import javascript from 'highlight.js/lib/languages/javascript';
import html from 'highlight.js/lib/languages/html';
import css from 'highlight.js/lib/languages/css';

Lembre-se de que, ao usar o NPM, as bibliotecas que você instala são baixadas para uma pasta chamada node_modules em seu projeto. Portanto, ao importar módulos, você precisa se referir a eles a partir dessa pasta.

Se você não quiser usar via NPM, aqui no site lá no finalzinho tem a opção de usar As HTML Tags, é só seguir o passo a passo que a própria biblioteca dá.

Um abraço e bons estudos.