不能在模块外使用import语句- Timber Starter Theme - Gulp

Question

我在Wordpress上使用Timber Starter主题编写一个简单的网站，但我需要在我的js文件中导入一些模块。我使用gulp，这是我的gulp文件

// Gulp (https://www.npmjs.com/package/gulp)
const gulp        = require('gulp')
// Compile scss to css (https://www.npmjs.com/package/gulp-sass)
const sass        = require('gulp-sass')
// Rename file (https://www.npmjs.com/package/gulp-rename)
const rename      = require('gulp-rename')
// Minify JS with UglifyJS3 (https://www.npmjs.com/package/gulp-uglify)
const uglify      = require('gulp-uglify')
// Minify CSS (https://www.npmjs.com/package/gulp-clean-css)
const cleancss    = require('gulp-clean-css')
// Concat all file, in one (https://www.npmjs.com/package/gulp-concat)
const concat      = require('gulp-concat')
// Images size more small (https://www.npmjs.com/package/gulp-imagemin)
const imagemin    = require('gulp-imagemin')
// Notification on your Mac/PC (https://www.npmjs.com/package/gulp-notify)
const notify      = require('gulp-notify')
// Write ES6 > compile to ES5 (https://www.npmjs.com/package/gulp-babel)
//const babel     = require('gulp-babel')
var babel = require('@rollup/plugin-babel');
// Browser Sync (for live render -  (https://www.npmjs.com/package/browser-sync))
const browsersync = require('browser-sync').create()

// SourceMaps, add path impacted file (https://www.npmjs.com/package/gulp-sourcemaps)
const sourcemaps  = require('gulp-sourcemaps')
// Stop the process if an error is thrown.
const plumber = require("gulp-plumber")


// PATH
const paths = {
js: {
src: ['./js/**/*.js', './js/*.js'],
dest: './dist/js'
},
css: {
src: ['./scss/**/*.scss', './scss/*.scss'],
dest: './css'
},
html: {
src: ['./templates/*.twig', './templates/**/*.twig' ]
}
}
const styles = () =>
gulp.src(paths.css.src)
.pipe(sourcemaps.init({loadMaps: true}))
.pipe(sass().on('error', sass.logError))
.pipe(cleancss())
.pipe(concat('main.css'))
.pipe(rename({ suffix: ".min" }))
.pipe(sourcemaps.write('./'))
.pipe(gulp.dest(paths.css.dest))
.pipe(browsersync.stream())
//.pipe(notify("Css ok !"))// JS
const scripts = () =>
gulp.src(paths.js.src)
.pipe(plumber())
// Transpile the JS code using Babel's preset-env.
.pipe(
babel({
presets: [
[
"@babel/env",
{
modules: true
}
]
]
})
)
.pipe(gulp.dest(paths.js.dest))
//.pipe(browsersync.stream())
//.pipe(notify("Js ok !"))

const browserSyncWatch = () => {
browsersync.init({
proxy: "maeva.live",
// ou proxy: "yourlocal.dev",
port: 3000
})
}
const twig = () =>
gulp.src(paths.html.src)
.pipe(browsersync.reload({ stream: true }));

const watchFiles = () =>
gulp.watch(paths.js.src, scripts)
gulp.watch(paths.css.src, styles)
gulp.watch(paths.html.src, twig);

const watcher = gulp.parallel(watchFiles, browserSyncWatch)
const build = gulp.series(gulp.parallel(styles));
exports.watch = watcher         // exec with :  gulp watch

我有一个index.js，我试图做简单的

import 'gsap';

和我得到了下一个错误消息:Uncaught SyntaxError:不能在模块外使用import语句

我的js文件加载在ma functions.php文件

wp_enqueue_script( 'entry-js', get_template_directory_uri() . '/js/index.js', array( 'jquery' ), '1.0', true);

注释这一行时，控制台中没有显示任何内容。我真的不明白gulp是如何工作的队列脚本。我很迷茫……

谢谢!

Answer 1

SyntaxError: Cannot use import statement outside a module可以通过以下选项之一解决:

1. 将以下内容添加到您的package.json文件

   {
   "type": "module"
   }
   

2. 使用.mjs扩展名重命名JS文件

3. 考虑使用Parcel代替Gulp。CSS/JS隐式构建没有配置复杂性和本地处理import与ES模块import语法。请看这个包裹的例子(你将指定你的index.php文件而不是html文件)