Qual a melhor forma de usar npm modules em projetos estáticos?

[kvnol]

E aí, galera.

Faz um tempo que já utilizo pacotes instalados pelo NPM e Gulp nuns projetos estáticos que faço com Jekyll e tal, funciona, mas não sei qual a melhor forma de importar esses pacotes.

Atualmente faço dessa forma, um exemplo do meu gulpfile.js:

const gulp = require('gulp');
/* ... outras libs */

const files = {
  'js': [ 
    'assets/js/modules/*.ts',
  ],
  'jsVendor': [
    'node_modules/owl.carousel/dist/owl.carousel.min.js'
  ],
  'cssVendor': [
    'node_modules/normalize.css/normalize.css'
  ]
};

gulp.task('jsVendor', () =>
  gulp.src(files.jsVendor)
    .pipe(concat('vendor.js'))
    .pipe(uglify())
    .pipe(gulp.dest('assets/js'))
);

/* tasks... */

Isso é certo de se fazer? Ou eu deveria usar o require para chamar essas libs?

[bizarro]

Fala @kvnol, tudo bem?

A maneira mais fácil de se utilizar qualquer plugin via npm seria chamá-lo como uma dependência usando import ou require nos arquivos, por exemplo, digamos que eu tenha um arquivo que precisa do lodash, nesse arquivo você iria fazer o seguinte:

import { countBy } from 'lodash';

// Utilizar a função countBy() no meu arquivo.

E assim vai para várias bibliotecas e outras dependências. Vale ressaltar que cada biblioteca tem uma estrutura diferente e varia de como é exportada, no caso do Owl, na documentação deles eles fazem assim quando tem Webpack:

import 'owl.carousel/dist/assets/owl.carousel.css';
import $ from 'jquery';
import 'imports?jQuery=jquery!owl.carousel';

Talvez você tenha que adicionar Browserify no seu build, mas como já tem uns arquivos TypeScript (.ts) no seu build process, acredito que o import já vá funcionar.

[kvnol]

Entendi, @lhbzr. Aí, no caso do owl carousel, no mesmo arquivo que eu faço a configuração (um carousel.js, por exemplo) dele eu faria esse require, certo? Ou, para separar as dependências das configurações, faria o require de todos no vendor.js...

[bizarro]

Como você está utilizando tanto o Owl Carousel quanto o Normalize, eu faria um import ou require de todos em um arquivo vendor.js e chamaria esse arquivo num main.js, acho que vai mais de gosto pessoal mesmo. Ficaria mais ou menos assim:

vendors.js.

import 'owl.carousel/dist/assets/owl.carousel.css';
import $ from 'jquery';
import 'imports?jQuery=jquery!owl.carousel';

main.js.

import 'vendors';

Aí você só chamaria um arquivo JavaScript na página, que no caso hipotético é o main.js.

[kvnol]

Puts, maravilhoso.

Vou testar nuns projetos aqui. Valeu, @lhbzr!

[bizarro]

Maravilha @kvnol, qualquer dúvida é só chamar! 😄