threejs OrbitControls和browserify / babelify ParseError：“导入”和“导出”可能仅与“ sourceType：模块”一起出现

编程问答 2022-06-22

问题描述

我有点机智。尽管我一直在尝试从许多来源获得建议的解决方案，但帖子标题中却出现错误，并且我不知道如何解决。基本问题是我想包括一些npm模块（只能以commonjs形式找到），以及包括使用Es6 import export语句的threejs OrbitControls模块。我了解如果我想将其与browserify一起使用，则必须使用babelify，并且尝试了各种建议的转换预设，但无济于事。我还尝试将整个应用程序移植到Es6，但是当我尝试包含要使用的npm模块（module.exports->“未定义的模块”）时，我得到了错误。

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

对帖子的长度表示歉意。

谢谢迈克尔。

这是部分.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);
    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 run build'的输出：

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>

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

babeljsbrowserifybrowserifybrowserifyes6-modulesthree.js