0

我整天都在尝试导入 PointerLockControls 以使我的相机在游戏中随光标移动，例如：
main.ts

import * as THREE from "three";
import { PointerLockControls } from 'three/examples/jsm/controls/PointerLockControls';

一切都很好，直到我尝试编译它以在浏览器中运行：

[17:02:51] Using gulpfile E:\Programowanie\NodeJS Projects\wn3d\gulpfile.js
[17:02:51] Starting 'default'...
[17:02:51] Starting 'bundle'...
[17:03:02] [SyntaxError: 'import' and 'export' may appear only with 'sourceType: module'] {
  line: 1,
  column: 1,
  annotated: '\n' +
    'E:\\Programowanie\\NodeJS Projects\\wn3d\\node_modules\\three\\examples\\jsm\\controls\\PointerLockControls.js:1\n' +
    'import {\n' +
    '^\n' +
    "ParseError: 'import' and 'export' may appear only with 'sourceType: module'",

尝试了我发现的所有东西-三指针锁-ts（似乎已经过时），三全，esmify（这会引发依赖错误..），babelify（使用预设@babel/preset-env），似乎我卡住了.

这是我的 gulpfile 代码：

const gulp = require("gulp");
const browserify = require("browserify");
const source = require("vinyl-source-stream");
const watchify = require("watchify");
const tsify = require("tsify");
const fancy_log = require("fancy-log");
//const babelify = require('babelify');
const esmify = require('esmify');

const watchedBrowserify = watchify(
    browserify({
        basedir: ".",
        debug: true,
        entries: ["./src/setup/main.ts"],
        cache: {},
        packageCache: {},
        exclude: []
    }).plugin(tsify, {
        emitDecoratorMetadata: true,
        experimentalDecorators: true,
        target: "es6",
        module: "commonjs",
        allowJs: true
    })
);

function bundle() {
    return watchedBrowserify
        .bundle()
        .on("error", fancy_log)
        .pipe(source("bundle.js"))
        .pipe(gulp.dest("./dist"));
}

gulp.task("default", gulp.series(bundle));
watchedBrowserify.on("update", bundle);
watchedBrowserify.on("log", fancy_log);

和 tsconfig：

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es6",
    "allowJs": true,
    "sourceMap": true,
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true,
    "esModuleInterop": true
  },
  "exclude": [
    "node_modules"
  ]
}

在我导入的 HTML 中：

<script src="dist/bundle.js" type="module"></script>

任何想法如何最终正确导入它？
感谢帮助。

4

0 回答 0