无法使用 browserify 和 babel 转换 threejs 的相对路径

Question

我是 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' and 'export' may appear only with 'sourceType: module' (1:0)

我还在 package.json 中添加了类型模块，但它仍然不起作用，这是我的 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"]
}

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

Answer 1

从 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

导入

无法使用 browserify 和 babel 转换 threejs 的相对路径

can't transpile relative path of threejs with browserify and babel

javascript

three.js

browserify

babeljs