我正在使用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设置(增加了所有的复杂性)?
1条答案
按热度按时间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脚本之前包含此内容,如下所示: