Gulp 如何在独立的 *.js脚本中使用js-cookie?

bnlyeluc  于 2022-12-08  发布在  Gulp
关注(0)|答案(1)|浏览(182)

我正在使用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
下面是我的gulpfile,后面是feature.js脚本,我尝试在其中使用js-cookie库:

gulp文件.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/功能.js

import Cookies from 'js-cookie';

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

我怎样才能让它工作呢?有没有一种方法可以用我简单的Gulp设置来完成它,或者我需要超越它,设置一个完整的Webpack设置(增加了所有的复杂性)?

siv3szwd

siv3szwd1#

不幸的是,据我所知,Gulp不支持使用ES6模块的能力,如果你想使用它们,你将需要使用Webpack。
但是js-cookie确实有一个jsDelivr CDN:<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>

相关问题