Блог

Я использую gulp для объединения и минимизации ряда автономных скриптов *.js, используемых на моем веб-сайте. По сути, это просто общая папка, в которую я помещаю небольшие служебные скрипты, запускаемые при загрузке страницы. Например, один из них запускает слайдер карусели, другой добавляет класс в заголовок, который сжимает его при прокрутке и т. Д. Каждая из этих «функций» имеет свой собственный отдельный файл *.js.

Теперь я хотел бы использовать популярную библиотеку js-cookie в одном из этих сценариев. К сожалению, поскольку мой проект не настроен как модуль ES6, я не могу импортировать библиотеку js-cookie так, как указано в документах, например:

import Cookies from 'js-cookie'

Когда я это делаю, я получаю сообщение об ошибке Uncaught SyntaxError: Cannot use import statement outside a module .

Я попытался изменить его на этот:

window.Cookies = require('js-cookie')

но это дало мне эту ошибку: Uncaught ReferenceError: require is not defined

Вот мой файл gulp, за которым следует feature.js сценарий, в котором я пытаюсь использовать библиотеку js-cookie:

gulpfile.js

 // Initialize modules
const { src, dest, watch, series, parallel } = require('gulp');
const sourcemaps = require('gulp-sourcemaps');
const sass = require('gulp-sass');
const concat = require('gulp-concat');
const uglify = require('gulp-uglify');
const postcss = require('gulp-postcss');
const autoprefixer = require('autoprefixer');
const cssnano = require('cssnano');
var replace = require('gulp-replace');
var merge = require('merge-stream');

// File paths (note that src paths are arrays)
const files = {
  scssSrcPath: [
    'scss/*.scss',
    'scss/_pageContentModules/*.scss'
  ],
  jsSrcPath: [
    'js/*.js',
    'node_modules/slick-carousel/slick/slick.js'
  ],
  scssDstPath: '../web/css',
  jsDstPath: '../web/js'
}

// Sass task: compiles SCSS files into style.css
function scssTask(){

  return merge(files.scssSrcPath.map(function (file) {
    return src(file)
  }))
  .pipe(sourcemaps.init()) // initialize sourcemaps first
  .pipe(sass()) // compile SCSS to CSS
  .pipe(postcss([ autoprefixer(), cssnano() ])) // PostCSS plugins
  .pipe(sourcemaps.write('.'))
  .pipe(dest(files.scssDstPath));
}

// JS task: concatenates and uglifies JS files to script.js
function jsTask(){

  return merge(files.jsSrcPath.map(function (file) {
    return src(file)
  }))
  .pipe(concat('app.js'))
  .pipe(uglify())
  .pipe(dest(files.jsDstPath));
}

// Watch task: watch SCSS and JS files for changes
// If any change, run scss and js tasks simultaneously
function watchTask(){
    watch(files.scssSrcPath, scssTask);
    watch(files.jsSrcPath, jsTask);
}

// Export the default Gulp task so it can be run
// Runs the scss and js tasks simultaneously
// then watch task
exports.default = series(
    parallel(scssTask, jsTask), 
    watchTask
);

 

js/feature.js

 import Cookies from 'js-cookie';

const rs = cookies.get('referral_source');
if (typeof rs !== 'undefined') {
  console.log('referral_source = '   rs);
}

 

Как я могу заставить это работать? Есть ли способ сделать это с помощью моей простой настройки Gulp, или мне нужно выйти за рамки и настроить полную настройку веб-пакета (со всей добавленной сложностью)?

К сожалению, насколько я знаю, Gulp не поддерживает возможность использования модулей ES6. Если вы хотите их использовать, вам нужно будет использовать Webpack.

Но js-cookie у него есть CDN jsDelivr: <script src="https://cdn.jsdelivr.net/npm/js-cookie@3.0.1/dist/js.cookie.min.js"></script> . Включив это перед вашим сценарием JS, вот так:

 <script src="https://cdn.jsdelivr.net/npm/jscookie@3.0.1/dist/js.cookie.min.js"></script>
<script src="./js/feature.js"></script>