JS include при сборке в gulp как реализовать?

Question

[Дмитрий]

Пишу последнее время много вопросов задаю) собираю сборщик на gulp. Вот нужно как то сделать инклюд js в файлах js.
Пока нашел только это решение https://www.npmjs.com/package/gulp-include
Но хотелось бы по возможности чтобы генерировалась sourcemap может есть какие то еще решения.
Можно было бы наверно препроцессором js это реализовать но мне я думаю пока еще в препроцессоре работать рано на js )

Answer 1

[Дмитрий]

вот в общем сам нашел варианта два ну и думаю этого достаточно будет.
1. gulp-include лучшее решение если не делаете прям крупных проектов или там плагины какие то. И можно в добавок к нему попробовать gulp-sourcemaps возможно им удастся еще и генерировать карты кому нужно. Но gulp-include можно не только js инклюдить но и любые файлы даже html.
2. gulp-browserify для тех кто не хочет отказываться от gulp но тут есть много плющек и можно модульность организовать. Это уже для тех кто работает по крупному.

Вот в общем может кому поможет это решение.

Answer 2

[Andrey Tsvetkov]

Я в своих проектах для этого использую gulp-rigger оно может быть полезным не только для JS

Comments

[Дмитрий]

а как gulp-rigger пользоваться почти тоже что и gulp-include получается?

[Andrey Tsvetkov]

Посмотрел, действительно, одинаковое использование)))

Answer 3

[qwead]

browserify ?

Comments

[Дмитрий]

по browserify ищу инфу что то ничего пока нормального не найду.

[qwead]

Дмитрий, import browserify from 'browserify';

const config = {
  path: {
    build: 'dist/',
    clean: ['dist/content.js'],
    content: 'content.js',
    src: 'src/index.js',
  }
};

const clean = () => del(config.path.clean);
export { clean };

export function js() {
  return browserify({entries: config.path.src, debug: false})
    .transform(babelify, { presets: ['es2015'] })
    .bundle()
    .pipe(source(config.path.content))
    .pipe(buffer())
    .pipe(uglify({mangle: false, ecma: 6}))
    .pipe(size({ title: 'JS' }))
    .pipe(gulp.dest(config.path.build));
}

const build = gulp.series(clean, js);
export { build };
export default build;

[Дмитрий]

qwead, что то я не въеду в этот browserify. Подключить то подключил.. Но не пойму с require как им пользоваться. module.exports только пока понял. а как jq через переменную $ работает что то не пойму) как там все работает с этими модулями.

[Дмитрий]

это что получается так файлы создавать для browseryrify

var a = function (x) {
  console.log(x)
};
module.exports = a;

и обязательно должен быть module.exports без него не будет работать получается

[qwead]

Дмитрий, import/export

[Дмитрий]

qwead, а чем import от export отличается? можно примеры записи?

[qwead]

Дмитрий, import импортирует, export - экспортирует))

1.js:
export function a (){}
2.js:

import { a } from './1.js';
a();

[Дмитрий]

qwead, а понятно)

Answer 4

[Dubrovin]

Используйте Rollup JS. В отличии от вебпак и браусерифи, он собирает файлы без всякого мусора. В отличии от gulp include вы можете использовать синтаксис import, export es2015.

Answer 5

[Александр Косицын]

Если проект маленький то используй parcel. Пишешь один скрипт в консоли и все