Question

我试图从threejs库导入文件，这些文件被移动到模块，但是examples文件夹中的一些功能（如VRControls）正在使用全局命名空间THREE。

我尝试过使用webpack imports-loader的不同方法，如：

import "imports-loader?THREE=three!../node_modules/three/examples/js/controls/VRControls.js";

console.log(VRControls)或console.log(THREE.VRControls)会产生错误。

其他尝试是在babel配置中编写加载器

return {
    target: 'web',
    devtool: 'source-map',
    entry: './src/application.js',
    output: {
        path: path.resolve(__dirname, 'www'),
        filename: debug ? 'bundle.js' : 'bundle.min.js',
        publicPath: ''
    },
    plugins,
    module: {
        rules: [
            {
                test: /\.js$/,
                include: [
                    path.resolve(__dirname, 'src')
                ],
                loader: 'babel-loader',
                query: {
                    compact: true,
                    presets: [
                        ['es2015', {modules: false}]
                    ]
                }
            }
        ],
        loaders: [
            {
                test: /\.\.[\/\\]node_modules[\/\\]three[\/\\]examples[\/\\]js[\/\\].*[\/\\].*\.js/,
                loader: "imports-loader?THREE=three"
            }
        ]
    },
    performance: {
        hints: false
    }
};

并在导入文件的应用程序内部

import "../node_modules/three/examples/js/controls/VRControls.js";

也给出了错误。如何在不必拉动整个图书馆的情况下导入此类案例？

使用ES6导入导入带全局的文件

0 个答案: