Question

我有以下index.js代码：

import {Asp} from './src/asp.js';

export default Asp;

以及以下run.js代码：

import Asp from './dist/bundle.js'; // Uncaught SyntaxError: The requested module does not provide an export named 'default'
import Asp from './index.js'; // works

const myASP = new Asp();

和webpack（3.11）配置文件：

const path = require('path');

module.exports = {
    entry: './index.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    },
    module: {
        rules: [
            { test: /\.js$/, exclude: /node_modules/, loader: "babel-loader" }
        ]
    }
};

我无法弄清楚为什么在导入... help ...

时使用bundle.js不起作用

更新

我放弃了webpack并使用以下配置转移到汇总，这解决了我的问题：

import uglify from 'rollup-plugin-uglify';

export default {
    input: 'src/index.js',
    output:{
        file: 'dist/index.js',
        name: 'Asp',
        format: 'es'
    },
    plugins: [
        uglify()
    ]
}

我无法弄清楚在webpack中与此相当的是什么 - 但它完成了这项工作！

Answer 1

在index.js文件中，您只需导入Asp，然后删除导出行。所以index.js文件将是：

import {Asp} from './src/asp.js';

在run.js

中

import {Asp} from './dist/bundle.js'; 

const myASP = new Asp();

Answer 2

默认情况下，Webpack会输出一个脚本文件，这意味着它没有导出，因此尝试将其导入另一个文件不会产生任何结果。

要告诉Webpack将捆绑包输出为可重用的库，您需要告诉它使用output.libraryTarget执行此操作，因此在您的情况下您可能需要调整

output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
},

是

output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
    libraryTarget: 'commonjs2'
},

与Web Pack捆绑后无法导入模块

2 个答案: