Question

我有一个es6脚本，其中包括带有es6导入的补间库。如果未转码，代码可以正常工作，我的意思是我可以导入补间并在脚本内使用它，如果我将webpacke与我的配置一起使用，则脚本出口会出现错误，因为TWEEN以某种方式未定义。

我尝试用mjs更改补间文件的扩展名，但它会生成其他错误，例如 require is not defined 我通过webpack使用require功能添加core-js模块

require("core-js/modules/es.symbol");

有问题的代码

'use strict';

...
import {TWEEN} from '../threejs/tween.js';
//import {TWEEN} from '../threejs/tween.js';
...
export class CustomClass extends ParentClass {

    constructor(arguments) {

        super(arguments);


        this.tweenGroup = new TWEEN.Group(); // the line that generate "Cant get Group of undefined"
    }
...
}

...

这是我的babel-loader配置配置

{
      test: /\.m?js$/,
      exclude: /(node_modules|bower_components)/,
      use: {
        loader: 'babel-loader',
        options: {
          sourceType: 'module'
        }
      }
    },

我的babel配置看起来像这样



module.exports = {
    presets: [
        [
            '@babel/preset-env',
            {
                debug: true,
                useBuiltIns: 'usage',
                corejs: 3
            }
        ]
    ],
    plugins: [
        // '@babel/plugin-proposal-class-properties',
        // '@babel/plugin-transform-runtime',
        // '@babel/runtime-corejs2',
        // '@babel/plugin-syntax-dynamic-import',
        // '@babel/plugin-syntax-async-generators',
        // '@babel/plugin-transform-regenerator',
        // '@babel/plugin-transform-async-to-generator',
        '@babel/plugin-transform-modules-commonjs',
        // '@babel/plugin-transform-typeof-symbol'
    ]
};

如果在未使用babel进行编译的项目中使用TWEEN导入的代码（我发布的第一段代码）就可以正常工作，但是如果运行devserver，则会生成错误。我不明白为什么我不能正确地导入Tween之后的编译。

我将竭尽所能。l

Answer 1

更新：我意识到我的设置和问题与您完全不同，但是在搜索解决方案时，我发现this thread with recommendation for npm intalling tween的babel工作流程。也许对您有帮助。

我仍然保留我的最初答复，这可能对其他任何人都有用：
我在js项目中包含TWEEN时遇到了一些麻烦（例如，使用import *作为'...'中的TWEEN），但是在those steps for simple installation之后，我将其包含在HTML中，而不是在js中，使其工作了：

<script src="js/libs/Tween.js"></script>

无法使用导入导入补间

1 个答案: