Three.js threejs OrbitControls和browserify/babelify ParseError:'；导入&x27；和'；出口'；只能与'；sourceType:module'；

我有点不知所措。我在文章标题中发现了这个错误，我不知道如何修复它，尽管我一直在尝试从许多来源提出的解决方案。基本问题是，我想包括一些npm模块（我只能在commonJS表单中找到），以及threejs OrbitControls模块，它使用Es6导入导出语句。我知道如果我想在browserify中使用babelify，我必须使用它，并且我尝试了各种建议的变换预设，但都没有用。我还尝试将整个应用程序移植到Es6，但当我尝试包含我想要使用的npm模块时，会出现错误（module.exports->“module not defined”）

下面我列出了代码的相关部分，非常感谢您的帮助

对这篇文章的篇幅表示歉意

谢谢，迈克尔

下面是partial.js：

import { OrbitControls } from '../../../../threejs/examples/jsm/controls/OrbitControls.js';
import { DragControls } from '../../../../threejs/examples/jsm/controls/DragControls.js';
//const OrbitControls = require('three-orbitcontrols');
//const DragControls = require('three-dragcontrols');
const assign = require('object-assign');
const defined = require('defined');
const mouseEventOffset = require('mouse-event-offset');
const tweenr = require('tweenr')();
const isMobile = require('../util/isMobile');
const query = require('../util/query');

module.exports = createAL1App;

function createAL1App (opt = {}) {
    // Scale for retina
    const dpr = defined(query.dpr, Math.min(2, window.devicePixelRatio));
    
    const cameraDistance = 3;
    let theta = 45 * Math.PI / 180;
    let phi = Math.PI / 4;
    const angleOffset = 20;
    const mouseOffset = new THREE.Vector2();
    const tmpQuat1 = new THREE.Quaternion();
    const tmpQuat2 = new THREE.Quaternion();
    const AXIS_X = new THREE.Vector3(1, 0, 0);
    const AXIS_Y = new THREE.Vector3(0, 1, 0);

.
.
.

    function NewOrbControl () {
    theta = 45 * Math.PI / 180;
    phi = Math.PI / 4;
    InitCamera();

    controls = new OrbitControls( camera, renderer.domElement );
    camera.position.set( 2, 2, 2 );
    controls.enableDamping = true; 
    controls.dampingFactor = 0.05;
    controls.update();
    controls.enabled = false;

.
.
.

以下是package.json：

{
    "name": "amperelaw1",
    "version": "1.0.0",
    "description": "THREE demonstration of Ampere's law",
    "main": "AL1Demo.js",
    "type": "module",
    "scripts": {
        "es5": "babel AL1Demo.js -o AL1DemoEs5.js",
        "browserify": "browserify AL1DemoEs5.js --standalone RunAL1Demo > AL1DemoBundle.js",
        "build": "npm run es5 && npm run browserify"
    },
    "author": "Michael Gericke",
    "license": "ISC",
    "dependencies": {
        "browserify": "^16.5.2",
        "dat.gui": "^0.7.7",
        "query-string": "^6.13.1",
        "watchify": "^3.11.1"
    },
    "devDependencies": {
        "@babel/core": "^7.11.6",
        "@babel/preset-env": "^7.11.5",
        "babel-cli": "^6.26.0",
        "babel-core": "^6.26.3",
        "babel-preset-env": "^1.7.0",
        "babel-preset-es2015": "^6.24.1",
        "@babel/preset-react": "^7.10.4",
        "babelify": "^10.0.0",
        "gulp-babel": "^8.0.0"
    },
    "browserify": {
        "transform": [
            [
                "babelify",
                {
                    "presets": [
                        "@babel/preset-react",
                        "@babel/preset-env"
                    ],
                    "global": true
                }
            ]
        ]
    }
}

下面是运行“npm运行构建”的输出：

C:\xampp\htdocs\PhysVis\scripts\Grp3D\AmpereLaw1>npm run build

> amperelaw1@1.0.0 build C:\xampp\htdocs\PhysVis\scripts\Grp3D\AmpereLaw1
> npm run es5 && npm run browserify


> amperelaw1@1.0.0 es5 C:\xampp\htdocs\PhysVis\scripts\Grp3D\AmpereLaw1
> babel AL1Demo.js -o AL1DemoEs5.js


> amperelaw1@1.0.0 browserify C:\xampp\htdocs\PhysVis\scripts\Grp3D\AmpereLaw1
> browserify AL1DemoEs5.js --standalone RunAL1Demo > AL1DemoBundle.js


C:\xampp\htdocs\threejs\examples\jsm\controls\OrbitControls.js:1
import {
^
ParseError: 'import' and 'export' may appear only with 'sourceType: module'
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! amperelaw1@1.0.0 browserify: `browserify AL1DemoEs5.js --standalone RunAL1Demo > AL1DemoBundle.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the amperelaw1@1.0.0 browserify script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Michael Gericke\AppData\Roaming\npm-cache\_logs\2020-09-12T20_19_33_977Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! amperelaw1@1.0.0 build: `npm run es5 && npm run browserify`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the amperelaw1@1.0.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Michael Gericke\AppData\Roaming\npm-cache\_logs\2020-09-12T20_19_34_066Z-debug.log

C:\xampp\htdocs\PhysVis\scripts\Grp3D\AmpereLaw1>

---

我也有同样的问题，这个答案对我有效