Construção de JavaScript com o Gerador de Site estático

1. 1: Oi, meu nome é Sean e bem-vindo ao meu edifício JavaScript para o curso Hugo. Você tem recursos avançados de construção JavaScript integrados para que você esteja criando requisitos sejam simplificados e você não precisa usar programas externos, como pacote cumulativo de pacotes ou Webpack. Talvez comece como ele pode estar se perguntando, o que é JavaScript construindo e empacotando e por que eu iria querer fazer isso? Isso envolve a obtenção de vários módulos ou bibliotecas JavaScript e você os combina em um arquivo. Na verdade, você só pode incluir os componentes dos módulos de que você precisa. E chamamos essa árvore tremendo. Você pode transferir a saída do código para trabalhar com navegadores mais antigos. E você também pode minificar o código que você produz e isso está compactando-o para torná-lo menor obter um aprendizado de página mais rápido. Como o pacote Hugo você vai usa o ESP, que é um pacote JavaScript rápido, e está escrito em Go. Ele tem uma ótima interface de API com Hugo. Seu código atualizará automaticamente o navegador em Salvar. Como o ES building integrado ao servidor de desenvolvimento de carga de biblioteca de vocês, você pode opcionalmente usar Babel com compilação AS para transpire e incluir preenchimentos de poli para navegadores mais antigos. O que esse curso cobre? Analisaremos o empacotamento e a construção de JavaScript em geral, usando o npm para baixar bibliotecas como Bootstrap, importações de módulos ou bibliotecas, impressão digital dos mapas de origem de saída para desenvolvimento para que você possa descobrir de onde os erros vieram. Ampliação para redução. Portanto, seu código carrega mais rápido. navegadores de segmentação para a saída para navegadores mais antigos são compatíveis com a agitação da árvore de código. Somente as partes da biblioteca que você está usando estão realmente incluídas. E criando uma parcial para que você possa reutilizar seu código e não precisar copiar e colar. Junte-se a mim neste curso e você nunca usará uma ferramenta de construção JavaScript externa com Hugo novamente, parecendo o curso. 2. Primeiros passos: Comece a usar. A primeira coisa que você precisa fazer é baixar os arquivos na seção de resultados, você só terá um arquivo para começar, e esse é o arquivo zip chamado zip de ponto estrela. Você terá que extrair os arquivos e, em seguida, você poderá abrir a pasta no código do Visual Studio. Antes de mostrar que você deve ter a versão mais recente do software a seguir, você precisa do código Hugo Visual Studio, node.js, que inclui NPM e no Windows e também inclui chocolate da Solon ego. E, opcionalmente, o recomendado é CLI e GitHub Desktop. Depois de extrair a pasta, se você configurou o código VS como eu recomendei no meu curso de introdução Hugo. Esse é apenas o primeiro vídeo do curso. E vou levantar esse LinkedIn na seção de resultados abaixo. Você pode clicar com o botão direito e abrir com código. Então, a partir daí, tudo está pronto para funcionar no Visual Studio. Na próxima lição, mostrarei como começar a usar todos esses arquivos. 3. Configuração do NPM: A primeira coisa que você precisa fazer antes de entrarmos na construção do JavaScript é configurar nosso ambiente NPM. Vamos inicializar o projeto dentro dele nele. Em seguida, vamos instalar o pacote de arquivos bootstrap com npm install Bootstrap. E então vamos criar alguns scripts índios básicos para o servidor de desenvolvimento e o comando build. Abri o ponto Getting Started zip a pasta extraída, e abri isso no código da Austrália de acordo com o último vídeo, você precisa entrar no menu do terminal e seguida, no novo terminal e digite npm init. Agora ele vai fazer algumas perguntas. E essas perguntas são direcionadas para pessoas que estão tentando publicar projeto no registro do NPM. Não vamos fazer isso também. Nem todas essas questões são realmente tão importantes. A primeira pergunta é o nome do pacote e que é retirado do nome da pasta que o projeto está sentado. O padrão geralmente é bom a menos que o nome da pasta não esteja correto. Basta pressionar enter para aceitar o padrão. Se você está satisfeito com essa versão, não é tão importante, a menos que você esteja focando no controle de versão e eu não vou passar por controle de versão neste vídeo. Isso é para outro vídeo. descrição realmente não importa. Mais uma vez, isso é para o NPM. Registro. ponto de entrada realmente não importa. O comando de teste não importa para nós. E eu gosto de garantir que eles obtenham repositório IES correto porque é um bom registro de onde eles obtêm o repositório é mais fácil, pois um registro fácil definido no caso de você precisar. Ele era esse assunto. O autor não importa, e as perdas realmente não importam, não publicam. Você então precisa clicar em Enter para confirmar que está tudo bem. Em seguida, você verá um arquivo package.json. Se você abrir isso, isso refletirá tudo o que simplesmente não colocamos , exceto pela adição de um script de teste, que na verdade não faz nenhum teste. Vamos em frente e instalar o Bootstrap e depois voltaremos para esses arquivos package.json. Então feche isso e volte para o terminal e digitando npm, instale o Bootstrap e pressione Enter. Você verá que ele está instalado em pacotes. Vamos meio que olhar para a pasta de módulos de nós que devemos apenas ser crédito. Honestamente, eu tenho Bootstrap e pop ab.js. E pop ab.js é, na verdade, uma dependência do Bootstrap. Se você já foi Bootstrap e o arquivo package.json deles, você notará definido, se rolarmos para baixo, eles têm uma dependência P do ponto de marionete js. E esse é outro pacote que o bootstrap realmente usa para seu JavaScript. É outra pasta Bootstrap. Você verá. Você verá algumas quedas de solos. E vamos trabalhar importando arquivos da pasta Bootstrap dele e modificando-os conforme necessário e depois construindo-os com Hugo. Feche esse pacote.json Dann morre fique confuso. Minimize a pasta de módulos de nó e voltaremos para o package.json. E você verá que agora temos uma dependência na parte inferior do Bootstrap. O projeto depende do Bootstrap. Em seguida, vamos examinar nossos scripts, retornaremos todo o conteúdo desse script de teste manterá as vírgulas invertidas. E então vamos recuar o teste de palavras. Mais preço que com div. Durante o servidor de desenvolvimento, precisamos executar ele vai servidor espacial. Então vamos executar uma opção que é traço, traço, desabilitar rápido, renderizar. Certifique-se de colocar um F maiúsculo e R. maiúsculo A próxima opção usará seu traço, traço GC. E isso significa coleta de lixo. O que isso vai fazer, porque estamos realmente produzindo recursos com Hugo faria alguns arquivos JavaScript. Queremos que vocês se livrem de qualquer arquivo antigo quando ele for executado, e é disso que se trata a coleta de lixo. Obrigado, vou fazer, vamos executar um script de compilação. Então coloque uma vírgula e , em seguida, interfira na nova linha. Coloque algumas vírgulas invertidas e vamos escrever, construir e, em seguida, dois pontos e um espaço e algumas vírgulas mais invertidas. Vamos executar o Hugo. Mas desta vez vou correr traço, traço, traço, traço. Então vamos salvar isso. Você não coloca uma vírgula após sua segunda lei e última lei, e você só pode colocar vírgulas entre as linhas, caso contrário, isso gerará um erro. Em seguida, você nos permitirá que indivíduos pseudocódigo na parte inferior que a palavra, palavras, script NPM, repetirá a partir deles. Na verdade, podemos executar o script com bastante facilidade sem usar a linha de comando. Começaremos com o servidor de desenvolvimento atingirá o jogo e verificaremos que funciona. Isso está funcionando muito bem e você pode Controlar clique para abri-lo. Na pesquisa, eu disse a você que você tem o site real que está trabalhando neste curso e está usando o servidor de carregamento da biblioteca. Portanto, se você fizer alguma alteração no Visual Studio Code e clicar em Salvar, Recarregue automaticamente no navegador. Agora, ao longo deste curso, o que estamos fazendo se você for clicar com o botão direito do mouse e inspecionar, ou se você diminuir sua janela, você entra no modo móvel. Você notará que há um pequeno menu no canto superior direito. Se você clicar nisso, ele realmente usa a biblioteca JavaScript Bootstrap para fazer isso suspenso. Essa animação é controlada por JavaScript. Essa é uma ótima maneira de verificar se o JavaScript está realmente funcionando. Nós entramos na cabeça. Você verá que atualmente você verá o JavaScript para a recarga automática por meio do Hugo. Essa é a primeira coisa que vem lá. E depois, você verá um link para a biblioteca JavaScript. No rodapé. Essa é uma CDN, que é um servidor online que está configurando o JavaScript para o navegador que o Bootstrap requer. 4. Criação básica de JavaScript: Agora vamos dar uma olhada em fazer uma compilação JavaScript básica usando o Hugo. Embora ainda não vamos ficar pesados na configuração, o que vamos fazer é usar uma configuração genérica para criar a biblioteca JavaScript do Bootstrap a partir de seu módulo de nó fonte que foi baixada anteriormente. Ao fazer isso, não precisamos confiar na CDN, o que é bastante para o desenvolvimento off-line. E mais tarde, vamos realmente querer personalizar a compilação, pois temos acesso à fonte. Então, na verdade, não incluiremos toda a biblioteca. Vamos incluir apenas as peças que estamos usando para minimizar, minimizar olhos falsos. Também podemos personalizar com quais navegadores a compilação do JavaScript é seu braço para trabalhar. Como padrão, a fonte só funcionará com os navegadores mais modernos. Vamos usar alguma tradução para que esse código moderno seja um pouco mais antigo para que outros navegadores realmente funcionem com ele. Vou deixar links para essas duas páginas que vamos ver na seção de recursos abaixo desta lição, o primeiro link é para o ouvido derramado. Não vamos entrar muito nessa página porque ela fica muito complicada rapidamente. A grande referência a ter por causa do documento Hugo não é tão complexa ou aprofundada? Há um bom pequeno gráfico da estrela e isso mostra uma boa comparação sobre a rapidez com que o ASPE realmente usaria. Outra vantagem da compilação do AS é que ele está escrito em Go e tem uma ótima API e funciona muito rápido com Hugo porque ele se enraíza e nós também vamos. Estamos realmente preocupados com a página de documentos Hugo facilmente para construção de JavaScript. E como eu disse que os links também na seção de recursos, há um monte de opções que podemos fornecer no momento, não estamos tão preocupados com as opções. Se você for direto para o fundo, você verá um exemplo. Onde posso usar esse exemplo e copiá-lo? E então vamos colá-lo no projeto. Na verdade, é bem simples. Você pode até escrevê-lo à mão. No projeto. Você pode fechar o arquivo package.json atingindo dois layouts e, em seguida, parciais. E entraremos no rodapé do roteiro. E vamos manter essa primeira linha para o arquivo JavaScript de filmagem, mas vamos destacar todo o resto e fazer Control Casey para comentar. E vamos salvar isso. E então vamos para a cabeça. Depois do CSS, faremos uma nova linha. Vamos fazer bootstrap nisso. Destaque isso e, em seguida, vamos comentá-lo com o Control K. Veja, o que eles precisam fazer é colar nesse código. No momento, não sentimos muito, tive a opção para que possamos nos livrar dessas duas principais linhas. E depois que a compilação do JS doc se livrará das operações que vamos editar mais tarde, mas por enquanto vamos nos livrar disso. Nós salvaremos isso antes que isso funcione e você verá uma área que surgiu. Ele está pedindo um arquivo na barra de script main.js. Vamos mudar isso para js slash main.js. Provavelmente se perguntando para onde isso vai? Se você clicar na raiz do projeto e criar uma nova pasta ou criar uma nova pasta chamada ativos. Dentro disso, vamos colocar qualquer arquivo que queremos que o Hugo modifique ou construa largura. Então, vamos fazer uma pasta chamada js. E todos esses links são relativos à pasta Assets dentro dessa pasta JS fará um arquivo chamado main.js. Vai salvar Adam salvará novamente a cabeça. Em seguida, vamos matar o servidor e executaremos os desenvolvimentos novamente e não devemos receber um erro. E está tudo ótimo. Quando eu estiver pronto para a próxima lição, onde nós importantes Bootstrap. 5. Importar módulos de JavaScript: Nunca importará um módulo JavaScript para poder trazer a biblioteca JavaScript Bootstrap o nosso construtor JS e produzir um arquivo. Precisamos usar uma instrução de importação com JavaScript. importação puxará a biblioteca ou o módulo. Na verdade, eles são todos módulos, mas estamos trabalhando com a biblioteca no arquivo onde a instrução import chamou. Se você precisar importar outra biblioteca, eles fornecerão instruções sobre como fazer a importação. De volta ao projeto. Entraremos no arquivo main.js e usaremos uma instrução de importação. E para fazer isso você escreve importação, vai importar estilo, que é tudo como bootstrap de. E então usaremos os comentários incorporados do sinal. E vamos importar do bootstrap. E isso direcionará o construtor JavaScript para nossa pasta de módulos de nó. O que eles acabaram? Ele entra na pasta Bootstrap, como especificamos aqui. E ele vai olhar para o package.json. E como o ES6, porque o ESBL é realmente um acúmulo de ES6, ele procurará para baixo a palavra-chave do módulo. E, a partir daí, módulo especifica qual arquivo importar. Você dirá, Ei, nós temos uma diretiva de módulo e isso é uma barra decente js slash bootstrap.css, ab.js. Então estamos procurando lá, redução da barra, barra, bootstrap dot ESM, não JS. Esse é o arquivo real. Vai ser importante para dispositivos móveis. Olhe mais para isso em um momento. Eu direi que está realmente acinzentado e isso porque declaramos a variável Bootstrap, mas ela nunca foi usada. E tudo bem porque o Bootstrap realmente inicializa por conta própria. Bootstrap não precisa que chamemos essa variável Bootstrap para começar, começa por conta própria. Portanto, não se preocupe com isso. Nós executamos o servidor de desenvolvimento, verificaremos que tudo está funcionando. Você provavelmente tem que matar o servidor e executá-lo novamente com as coisas que não estão funcionando para você. Depois de abrir no navegador, você clica em, você pode diminuir sua tela e clicar no menu, qualquer um daquele menu suspenso, tudo está correto. Você pode verificar isso entrando na cabeça e rolando para baixo e verá um link para o arquivo main.js que criamos. E se você entrar em fontes, verá a pasta JavaScript. E há o arquivo main.js. E a primeira coisa que é muito importante é a pontuação de dependência do ponto de marionete js. Na parte inferior, você verá o aviso de direitos autorais da loteria JavaScript Bootstrap. Isso está funcionando bem, importamos toda a biblioteca. 6. Configuração de desenvolvimento e produção de desenvolvimento: Semelhante ao olhar para criar alguma configuração para ambientes de desenvolvimento e produção, na verdade, precisamos a configuração seja um pouco diferente que a configuração seja um pouco diferente, dependendo se um desenvolvimento e é quando estamos trabalhando em uma depuração do site. Ou se estamos tentando enviar código de produção que precisa ser o menor possível para um servidor. Então você precisa fazer as coisas um pouco diferentes. Agora aqui está o básico, o que vamos nos sentar em desenvolvimento. Queremos mapas de origem para o habilitado, mas não queremos qualquer ampliação. Na verdade, não precisamos definir a opção de minificação porque isso acontece por padrão. Em produção. Queremos mapas de origem desativados. E isso também comprou uma falha, mas precisamos minificar o código. Em seu projeto. Você precisa entrar na pasta Layouts e, em seguida, abrir o header.html. Você verá que temos Bootstrap JS aqui. Após a compilação do JS doc, precisamos especificar a opção para optar. E então vamos criar uma variável aqui para operações. Coloque alguns aparelhos duplos encaracolados. E então fazemos um cifrão e fazemos UPS. Agora, como estamos definindo essa variável pela primeira vez, temos que usar dois pontos iguais. Agora, para fornecer opções para o edifício JavaScript, precisamos usar um dicionário, e ele também é conhecido como um mapa. Então dict. Vamos então ir aos documentos e vamos dar uma olhada em quais são as opções. Se rolarmos para cima, olhe para baixo e você dirá minify. E isso pode ser definido como verdadeiro ou falso por padrão, está em false. A próxima opção que precisamos fazer é um mapa fonte. E se quisermos habilitá-lo, temos que usar inline. Vamos configurar isso. Para produção. Vamos definir minify faz você colocar isso em vírgulas invertidas. E depois, ao lado disso, vamos fazer verdade. E você não precisa de vírgulas invertidas para isso. Agora, antes de seguirmos em frente, se você colocar traços no início e no final de todas as suas linhas de código com chaves. Isso significa que nenhuma nova linha ou espaços serão inseridos em seu HTML real. Isso facilita muito a depuração. Eu vou fazer isso aqui também. Faz você colocar um espaço entre o traço e o comentário. Introduza o rosto e o traço. E faremos isso aqui também. Mas não vou colocar um traço no final porque quero uma nova linha antes que a tag de script seja inserida. Então, essas são nossas opções de produção. Radula, comente por mim mesmo as opções de produção. E vou destacar isso e desenhar Casey, o que vou fazer nossas opções de desenvolvimento. Que essas opções substituirão o desenvolvimento padrão. Vamos dar uma olhada em como isso funciona. Então, fazemos uma nova linha. Vou colocar alguns traços também antes de esquecermos. Farei isso por esses comentários também. Isso torna a depuração muito mais fácil se você ainda não colocou novas linhas e novo código funcionará se EQ, e isso significa se for igual. Esse é o Hugo. ambiente de pontos faz uso um desenvolvimento de vírgulas maiúsculas e depois invertidas. ambiente Go retornará o ambiente em que estamos atualmente. E se estivermos em um ambiente de desenvolvimento, a palavra desenvolvimento será devolvida. E isso é igual ao desenvolvimento. E então o seguinte acontecerá. Vai nos colocar Bay alanine e faremos uma etiqueta final com alguns traços. Então, o que faremos, copiaremos nossa linha UPS e a colaremos. Mas o mais importante é que você deve remover essa coluna porque estávamos redefinindo a variável. Você precisa remover a coluna terá um problema. Vamos nos livrar do minify. E faremos o mapa de origem. Você deve usar um M maiúsculo para o mapa de origem. A única opção disponível é em linha. Quais são nossas opções iniciais para produção. Se estivermos desenvolvendo a etapa inicial ocorrerá. E tudo bem. E ele vai sobrescrever com esta lei e ele é um substantivo minificação ocorrerá para o desenvolvimento. Temos um mapa fonte em linha. Vamos salvar isso. E vamos dar uma chance. Vamos executar o script de desenvolvimento. Vamos dar uma olhada no servidor. Ainda temos nosso JavaScript funcionando porque as notícias móveis funcionam. Entramos no arquivo JS. Você notará agora que há uma pasta de módulos de nó lá. E você provavelmente está se perguntando por que, o que a pasta de módulos de nó não está fazendo na minha pasta JavaScript para o meu site. Se você entrar em main.js e jurar direto para baixo, verá uma linha lá e ela tem o URL do mapa de origem. O que isso está fazendo, se estamos tentando depurar o código, o latão está realmente puxando nossas dependências de módulos de nó. E você pode realmente clicar em uma Era e ela realmente mostrará onde esse erro existe nas quedas que você vai puxar para Build. Você pode realmente voltar para o solo, então descobrir onde o erro ocorre e dizer que um mapa de origem funciona. Mas na produção isso não vai acontecer. Então, vamos dar uma olhada na produção agora e ver como ela é diferente. Produção gastronômica. Você notará os códigos cheios de espaços e novas linhas e inventado muito bem e é muito fácil de ler. Vamos prosseguir e conferir nosso código de produção. O que faremos, apertaremos o botão Lixeira para matar o terminal, o botão de construção. Isso não será executado no servidor, mas o que acontece é que ele cria uma pasta pública para nós. E aqui estão todos os arquivos prontos para serem carregados em um servidor FTP. Abrimos o arquivo JavaScript e, em seguida, o main.js. Você notará que as coisas são completamente diferentes. Não conseguimos mais espaços em novas linhas. E todas as variáveis foram encurtadas para caracteres realmente curtos para tentar compactar o tamanho do arquivo e minimizar a quantidade de caracteres que está sendo usada. Então é como um longo Alon grande que é para todo o arquivo. Portanto, é muito menor do que costumava ser. 7. Impressão de marcas digitais: O próximo passo é a impressão digital, será gerar uma impressão digital que é um arquivo hash com base na saída do arquivo JavaScript. Por muitas razões, o nome do arquivo real, teremos a impressão digital adicionada ao nome do arquivo, que torna a queda única. O navegador não terá um arquivo construído mais recente confundido com um arquivo antigo porque eu tenho hashes diferentes nos nomes de arquivos reais. O outro motivo é que o navegador pode usar a impressão digital para verificar se a impressão digital para verificar se o arquivo JavaScript não foi substituído e isso é uma verificação de segurança. Na verdade, vamos fornecer um número de cheque e isso será verificado em relação ao arquivo real. O navegador pode descobrir se o arquivo que está sendo baixado e carregado no navegador é realmente a queda correta que nós mesmos colocamos lá. Então, vamos começar. O link para esta página na seção de resultados abaixo, esses caras através de como a impressão digital funciona com Hugo. Agora, se você olhar como funciona aqui, eles têm o recurso real e, em seguida, eles estão executando, eles estão usando um pipe e, em seguida, estão percorrendo recursos, não impressões digitais. Na verdade, podemos remover a parte de recursos e apenas executar impressões digitais. Devemos usar um f. minúsculo e o espaçamento especificando SHA-512 superior da impressão digital. Podemos deixar isso fora se quisermos. O que podemos fazer agora é que depois de fizermos isso, podemos colocar a propriedade de integridade. Acabamos de especificar a mesma variável que a fonte. Mas em vez de fazer um link permanente de ponto ou permalink real, temos que especificar a integridade de ponto, ponto, ponto. E isso será um hash. Vamos dar uma chance a isso. Eu entro em layouts e depois parciais e cabeça. Você verá que recebemos nosso recurso, então estamos fazendo um pipe e o estamos executando através do JS build. Em seguida, colocará outra impressão digital de Moran. Em seguida, a tag de script após a fonte, falaremos de integridade. Então, é provável que estejamos usando uma variável incorporada. Digitaremos construído para esse tempo, faremos dados de pontos com uma integridade de D e ponto maiúsculas. Fecharemos nossos aparelhos duplos encaracolados. Em seguida, salvaremos isso e executaremos o servidor de desenvolvimento. E vamos dar uma olhada. Vamos apenas verificar o JavaScript está funcionando com o menu suspenso, o que é ótimo. Eles entram no arquivo js. Os alunos do arquivo JS agora têm um hash para o nome do arquivo. O arquivo em si é o mesmo. Que hash por dentro. À medida que atualizamos nosso JavaScript, um novo arquivo será emitido como novo hash e o navegador forçado para baixo com o novo arquivo. Você não terá nenhum problema de armazenamento em cache. A outra coisa que podemos fazer é ir a elementos e abrir a cabeça do documento e rolar para baixo e você notará que temos nosso nome de arquivo lá com o hash, essa atitude, e nós temos temos nossa integridade lá. Por padrão, são conjuntos SHA-256. A codificação é que o hash será verificado em relação a esse arquivo, não o nome do arquivo real, mas o conteúdo dele. E se o conteúdo desse arquivo for esse hash, então estamos prontos para ir e as verificações de segurança passaram. 8. Treeshaking: Esta lição é sobre tremores de árvores. Árvore tremendo, onde incluímos apenas as partes necessárias da biblioteca e depois elas são construídas. Para fazer isso, primeiro você deve importar apenas os componentes da biblioteca de que você precisa. Esbl, que é o que Hugo usa, suporta agitação de árvores por padrão. Isso é baseado nos componentes que são importantes, por isso é realmente muito fácil de fazer. E a principal razão pela qual fazemos isso é que ajuda a manter o tamanho dos arquivos baixos porque muitos dos arquivos são mais lentos as páginas a serem carregadas. E se você estiver usando algumas bibliotecas diferentes e sua página, isso vai diminuir rapidamente. Então, vamos entrar nisso. Vamos fazer, é que vamos dar uma olhada, em primeiro lugar, abrir os ativos e o main.js e vamos destacar isso e fazer o Caso de controle comentar acima dele. Vamos colocar um comentário que é importar toda a biblioteca de bootstrap. E não vamos mais fazer isso, mas vamos deixá-lo de qualquer maneira como referência. A próxima coisa que faremos é importar apenas as partes necessárias da biblioteca. Ele é como faremos isso. Vamos importar. Então essas partes do bootstrap. A maneira como resolvemos quais peças podemos realmente importar. Entramos em nossa pasta sem módulos e, em seguida, inicializamos. E nós descobrimos que o arquivo que está sendo usado para construir é ir para o disco e depois js, e então é bootstrap dot ESM dot js. Se você marcar diretamente na parte inferior do arquivo, você notará que temos nossa exportação. Se você destacar todas essas palavras lá e copiá-las, poderá colá-las aqui. Isso realmente importará tudo. Mas não queremos isso. Então o que vamos fazer é colocar todas essas palavras em novas linhas. Então, podemos comentá-los facilmente. Se necessário. Para continuar pressionando Enter para obter essas novas linhas. Vai ter essa última nova linha de fuga. Agora, por padrão, a única coisa que você realmente precisa para o site que eu configurei é o colapso. Usamos o Control Casey para comentar tudo isso. Você não precisa de menu suspenso para uma configuração de menu suspenso de menus suspensos de qualquer maneira. Então vamos controlar Casey essa dica de ferramenta. Último tópico. Em seguida, pressionaremos Control S para salvar executar o servidor de desenvolvimento. E vamos dar uma olhada. Verificaremos nossos JavaScripts funcionando. Então, os colapsos obviamente são importantes. Em seguida, vá para a cabeça e você pode ver onde ainda importa o mesmo arquivo. E então entraremos em fontes e JavaScript. E há nossa importação. Ainda vai importar o pop app.js, que não é a maior biblioteca. Mas no final, a corrida vai importar a parte do Bootstrap. Enquanto eu li que precisamos, o que vai ser uma economia de tamanho. 9. Definir o alvo de saída: Agora acabamos de definir nossa meta de saída. mundo Esp pode traduzir a maioria das novas sintaxe JavaScript em versões mais antigas até um máximo de ES 2015. Espn não pode traduzir para S5 e para os ouvidos 5 o que o Internet Explorer e muitos outros navegadores antigos usam. Mas, felizmente, isso geralmente não um requisito e não é algo que o Bootstrap suporta de qualquer maneira, é sobre uma falha AS build traduz a linguagem até a versão de orelhas mais recente é realmente chamada de ES em seguida, que é moderno para a maioria dos navegadores suportar uma falha. Ele envelhecendo ESP e realmente configurado para funcionar na maioria dos navegadores. Vamos configurar o ESBL, então ele se traduz para ES 2015. Adoro esse link na seção também há. É um site muito bom chamado Posso usar? E no Quênia eu uso, vou colocar o ES6, que também é chamado ECMAScript 20152015. E você notará que o Internet Explorer não suporta a maior parte do S6 Edge a partir de 20, $17 Firefox em 2017 faz o Chrome a partir de 2016. Safari de 2016, o ES6 tem realmente um bom suporte e mostrarei o que o Bootstrap atualmente suporta nessa página do GitHub de inicialização, se você rolar para baixo e abrir a lista de navegadores RC. E deixarei um link para isso na seção de recursos. Isso é o que o arquivo que o Bootstrap fornece à CDN. Isso é o que eles suportam fora da caixa. Eles suportam Chrome versão 60, Firefox versão 60, iOS 12, Safari 12 e não Internet Explorer. Vamos comparar isso com o ES6. Eles estão fazendo o Chrome versão 60. Es6 é realmente baixo para o Chrome 51. Eles fazem o Firefox versão 60, na verdade vamos suportar até a versão 54. E então eles fazem a versão 12 para o Safari no iOS. Ferramenta de versão para o Safari funciona, você apoiará o tin de integração. Então, ao especificar o ES6 no hago estava realmente suportando um pouco mais do que o que o Bootstrap realmente suporta por padrão. Portanto, não há nenhum mal em fazer isso. Então, de volta à página de documentos de construção do JavaScript, você verá uma opção chamada target e verá o ES padrão em seguida. E isso não é muito útil porque isso usará alguns dos recursos de linguagem mais modernos que muitos navegadores não suportarão. Vamos escolher o ES 2015. Há um leiloeiro de ES cinco, mas a realidade é que a ESBL não sabe traduzir. A maioria das correções de idioma até ES cinco. E se você realmente disser como cinco, é mais do que provável que você tenha erros. Usar um alvo do IAS 2015 entrará na pasta Layouts e, em seguida, parciais e depois cabeçará. E você verá que temos nossas opções aqui. Para ambos, eles usarão Alt click fará o alvo. Es 2015. Vamos apenas fazer uma verificação rápida para que pareça estar relacionada. Quando eu estiver alterando a configuração assim, terei que matar o servidor e reiniciá-lo apenas para ter certeza. E depois verificaremos isso no navegador. Quando você inicia, quando você apaga, que você precise atualizar no navegador. Portanto, nosso JavaScript ainda está funcionando. Podemos ver que ainda estamos recebendo arquivos lá. Tudo está bom. 10. 10: Se você chegou até aqui, você está indo muito bem. Esta é a última coisa que vamos fazer no curso, e isso é criar uma parcial. Precisa mover todo o código de compilação JavaScript que acabamos de concluir em parcial. E estamos fazendo isso para que possamos reutilizar o código para qualquer tarefa de construção de JavaScript que tenhamos. Não precisávamos copiar e colar nada. Podemos apenas reutilizá-lo. Agora, normalmente, você atribuiria o contexto de ponto a uma parcial. Mas neste caso, vamos realmente atribuir o caminho do arquivo JavaScript, que vamos criar para o parcial. E isso instruirá a parcial em que queda precisa ser construída. Link para a página de documentos sobre o caso de modelos parciais. Você não fará nenhuma leitura adicional em termos desta lição. Estou tentando mantê-lo o mais simples possível. Faremos é deixar nosso comentário Bootstrap JS lá dentro e, abaixo, escreveremos parcial. Em seguida, vamos fornecer uma parte da parcial e vamos apenas chamar essa compilação de ES parcial. Então, normalmente, você colocaria um ponto aqui para os contextos que você forneceu à parcial. Mas neste caso, o que faremos é fazer js slash main.js. Copiando isso daqui de baixo. O que faremos é substituí-lo pelo ponto e, em seguida, pegaremos todo esse código e Control X para cortá-lo. Eu não vou dizer isso porque eu realmente tenho o servidor executando isso em um por era. Vou então entrar em meus layouts e depois parciais e farei um novo código parcial, ESBL dot HTML. E eu vou colar esse código. O que é realmente importante é que você tem o ponto lá para o recurso real que você está construindo e isso será atribuído fornecendo o caminho para a queda que ele após a parcial. Vou dizer isso. Vou salvar minha cabeça e depois verificaremos. Vá com o botão direito e inspecione. E depois iremos para fontes. E diremos que, em JavaScript, temos nosso arquivo JavaScript principal. Só para testar o conceito. Agora teremos construindo a filmagem É que não há muito nele, mas vamos construí-la de qualquer maneira apenas por uma questão de testes. Vou apenas colocar uma cópia e colar essas duas linhas abaixo e chamaremos essa filmagem É que você provavelmente não as separaria normalmente, mas apenas para testar os primeiros pontos js. E então teremos que fazer é entrar no estático e JS e arrastá-lo para nossa pasta js de barra de ativos SSH. Então vou salvar a cabeça. Agora temos nosso arquivo de rodapé sendo construído pelo edifício ES Hugo disse que não há muito nele. Eu provavelmente não incluirei isso normalmente no arquivo principal porque não adianta dividi-lo. Mas apenas para demonstrar o quão poderosos esses parciais realmente são. Se você tiver outros arquivos JavaScript que gostaria de criar, tudo o que você precisa fazer é copiar e colar a linha e alterar o caminho. E isso é relativo à pasta Ativos porque estamos lidando com os resultados, diz função dot get.