时间戳

首页 > 解决方案 > 无法使用导入导入补间

babeljs - 无法使用导入导入补间

问题描述

我有一个 es6 脚本，其中包含一个带有 es6 导入的补间库。如果代码没有被转译，代码可以正常工作，我的意思是我可以导入补间并在脚本中使用它，如果我在我的配置中使用 webpacke，脚本退出时会出错，因为 TWEEN 在某种程度上是未定义的。

我尝试使用 mjs 更改补间文件的扩展名，但它会产生其他错误，例如 require is not defined 我使用 require 函数 webpack 添加 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

标签： babeljswebpack-4tween.js

解决方案

更新：我意识到我的设置和问题与您相比有很大不同，但是在搜索解决方案时，我发现这个线程建议使用 npm intalling tween for babel 工作流。也许这对你有帮助。


我仍然在这里留下我的初始回复，可能对其他人有用：
我在我的 js 项目中包含 TWEEN 时遇到了一些麻烦（例如，使用 import * as TWEEN from '...'），但是按照这些步骤进行简单安装我得到了它在我将它包含在 HTML 中而不是在 js 中之后工作：

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

推荐阅读