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

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

我正在 wordpress 上使用 Timber Starter Theme 编写一个简单的网站，但我需要在我的 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: Cannot use import statement outside a module

我的js文件加载在mafunctions.PHP文件中

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

当我评论这一行时，我的控制台中什么也没有出现。我真的不明白 gulp 是如何将脚本排入队列的。我很迷茫...

谢谢！

解决方法

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

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

   {
      "type": "module"
   }
   

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

3. 考虑使用 Parcel 代替 Gulp。 CSS/JS 隐式构建 s，没有配置复杂性，并使用 ES 模块 import 语法本机处理 import。 See this Parcel example（您可以指定 index.php 文件而不是 html 文件。