模块分析失败:意外的令牌(238:16)您可能需要适当的加载程序来处理此文件类型

Question

我正试图在我的vue-js应用程序中使用ArcballControls.js控件。此类具有使用箭头语法的函数，控件中的其他所有类都不使用箭头语法。这是我能理解的其他文件之间的唯一区别。下面是三个js 提供的ArcballControls.js

https://github.com/mrdoob/three.js/blob/dev/examples/jsm/controls/ArcballControls.js

下面是来自three.js 的整个jsm/控件

https://github.com/mrdoob/three.js/tree/dev/examples/jsm/controls

当我尝试在我的应用程序中使用这些控件时，我会收到这个错误。

error  in ./node_modules/three/examples/jsm/controls/ArcballControls.js
Module parse failed: Unexpected token (238:16)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|   //listeners
| 
>   onWindowResize = () => {
| 
|       const scale = ( this._gizmos.scale.x + this._gizmos.scale.y + this._gizmos.scale.z ) / 3;
@ ./node_modules/cache-loader/dist/cjs.js??ref--13-0!
./node_modules/@vue/cli-plugin-babel/node_modules/babel-loader/lib!
./node_modules/cache-loader/dist/cjs.js??ref--1-0!
./node_modules/vue-loader/lib??vue-loader-options!
./src/components/Sidebar/ThreeDCanvas.vue?vue&type=script&lang=js

这是我的package.json文件

"dependencies": {
"@babel/plugin-transform-arrow-functions": "^7.16.7",
"three": "^0.133.0",
"vue": "^2.6.11",
"vue-style-loader": "^4.1.2",
"vuetify": "^2.6.3",
"vuex": "^3.1.2"
},
"devDependencies": {
"@babel/core": "^7.17.8",
"@babel/preset-env": "^7.16.11",
"@mdi/font": "^6.5.95",
"@vue/cli-plugin-babel": "~4.5.0",
"@vue/cli-plugin-eslint": "^3.12.1",
"@vue/cli-service": "~4.5.0",
"@vue/compiler-sfc": "^3.2.31",
"@vue/eslint-config-prettier": "^4.0.1",
"babel-core": "^6.26.3",
"babel-eslint": "^10.1.0",
"babel-loader": "^7.1.5",
"babel-preset-es2015": "^6.24.1",
"css-loader": "^3.5.3",
"less-loader": "^5.0.0",
"node-sass": "^7.0.1",
"prettier-eslint": "^13.0.0",
"sass": "^1.49.7",
"sass-loader": "^7.3.1",
"vue-svg-loader": "^0.12.0",
"vue-template-compiler": "^2.6.11",
"webpack": "^4.46.0"
},

在config/index.js中，在module属性中，这是我设置babel加载程序的方式，我不确定这是否是正确的方法

module: {
rules: [
{
test: /.s(c|a)ss$/,
use: [
'vue-style-loader',
'css-loader',
{
loader: 'sass-loader',
// Requires sass-loader@^7.0.0
options: {
implementation: require('sass'),
indentedSyntax: true, // optional
},
},
],
},
{
test: /.js$/,
exclude: /node_modules(?!/three)/,
use: [
{
loader: 'babel-loader',
options: {
presets: [['@babel/preset-env', { targets: 'defaults' }]],
},
},
],
},
],
},

这是我初始化三维场景的组件

<script type="module">
import * as Three from 'three'
import ThreeScene from '@/components/Scene/ThreeScene.js'
import Renderer from '@/components/Scene/Renderer.js'
import Camera from '@/components/Scene/Camera.js'
import HLight from '@/components/Scene/HLight.js'
import DLight from '@/components/Scene/DLight.js'
//import is here
import { ArcballControls } from 'three/examples/jsm/controls/ArcballControls.js'
import ObjectLoader from '@/components/Scene/ObjectLoader.js'
import CubeLoader from '@/components/Scene/CubeLoader.js'
export default {
name: 'ThreeDCanvas',
data() {
return {}
},
methods: {
init() {
this.scene = new ThreeScene()
this.camera = new Camera()
this.renderer = new Renderer({ antialias: true })
this.objectLoader = new ObjectLoader()
this.controls = new ArcballControls(
this.camera,
this.renderer.domElement,
this.scene
)

有人能帮我找出我在这里做错了什么吗？

Answer 1

在模块的config/index.js文件中添加了babel加载程序。

{
test: /.jsx?$/,
exclude: /node_modules/,
use: ['babel-loader']
},

在package.json中删除了不必要的依赖项，并降低了一些依赖项的级别。我使用的节点版本是114.17.4，因此，节点sass不得不降级到4.14.1，在修复了threejs的loader问题后，我遇到了sass加载程序。

"node-sass": "^4.14.1",
"prettier-eslint": "^13.0.0",
"sass": "^1.49.7",
"sass-loader": "^7.3.1",
"@babel/core": "^7.12.16",
"@babel/eslint-parser": "^7.12.16",

我从package.json.中删除了babel-loader和babel-preset-es2015

这是我的babel-config.js

module.exports = {
presets: ['@vue/cli-plugin-babel/preset'],
}

当我进行这些更改时，我可以从threejs访问arcballcontrol。