无法使用 browserify 和 babel 转译 Threejs 的相对路径

编程问答 2022-04-24

问题描述

我是 babel 和 browserify 的新手，我在使用 browserify 和 babel 进行转换时遇到问题，我已经安装了 Threejs 包并添加了

import * as THREE from 'three'

当我使用下面的命令转译时它工作正常

browserify input.js > output.js -t babelify

但是当我添加另一个导入时

import {GLTFLoader} from '../node_modules/three/examples/jsm/loaders/GLTFLoader'

我再次使用该命令，它不起作用，它说

'import' 和 'export' 只能与 'sourceType: module' (1:0) 一起出现

我还在 package.json 中添加了 type 模块但它仍然不起作用，这是我的 package.json

{
  "name": "three.js","version": "1.0.0","description": "","main": "index.js","scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },"keywords": [],"author": "","license": "ISC","dependencies": {
    "three": "^0.129.0"
  },"devDependencies": {
    "@babel/core": "^7.14.5","@babel/preset-env": "^7.14.5","babelify": "^10.0.0"
  },"type": "module"
}

这里也是我的 babel.config.json

{
    "presets": ["@babel/preset-env"]
}

有什么我需要添加或更改的吗？

解决方法

从 js 文件夹导入示例会起作用

import {GLTFLoader} from './node_modules/three/examples/js/loaders/GLTFLoader'
// or depending on your path
import {GLTFLoader} from '../node_modules/three/examples/js/loaders/GLTFLoader'

jsm 文件夹中的文件从 three.module.js 导入

babeljsbrowserifybrowserifybrowserifyjavascriptthree.js