首页 文章

Webpack包中的必需模块未定义

提问于
浏览 次
2

我正在构建一个javascript库并使用require（）方法将外部模块需要到其他模块中 . 我的问题是我要求的模块没有定义 . 我可以看到所有模块都在webpack输出文件中，但在运行时所需的模块返回undefined .

我做了一个实验并将需要的模块移动到输出文件顶部的另一个模块，这样浏览器首先加载了所需的模块 . 这解决了这个问题 .

例如：

// main.js
var moduleA = require('./module.a.js');

var main = (function() {
    "use strict";


    return {
        moduleA: moduleA
    }
})();

exports.main = main;



// module.a.js
var moduleA = (function() {
    "use strict";



    return {
        myMethod: myMethod
    }
})();

exports.moduleA = moduleA;

目前我的webpack.config.js定义了条目文件是main.js

var path = require('path');
var webpack = require('webpack');
var libraryName = "myLib";

module.exports = {
  entry: './src/modules/main.js',
  output: { 
    path: __dirname+"/build", 
    filename: libraryName+'.all.js',
    library: libraryName,
    libraryTarget: 'umd',
    umdNamedDefine: true
  },
  resolve: {
    root: [
        path.resolve('./src/')
    ]
  },
  module: {
    loaders: [
      // JS
      {
        test: /.js/,
        loader: "babel-loader",
        exclude: /node_modules/,
        query: {
          presets: ['es2015']
        }
      },
    ]
  }
};

这导致main.js首先被加载到输出文件中，如果手动重新排序输出文件中的模块，那么在我的主模块之前首先读取moduleA，我该如何用webpack修复它？我的其他webpack构建在输出文件的顶部有输入文件，但它工作正常 .

javascript module webpack require

1 回答

  • 4

    一旦开始使用Webpack，就可以使用大大简化的模块 . 你不是't have to wrap things in IIFE' . CommonJS模块（您在使用Webpack时构建的模块）可以自动完成所有操作，并且不会污染全局范围 . 您只公开放在 module.exports 中的内容 .

    请尝试以下方法：

    // main.js
"use strict";

var moduleA = require('./module.a.js');

// do something with moduleA.myMethod()

module.exports = "Whatever you want to export";

    和

    // module.a.js
"use strict";

function myMethod() { 
  return "something";
}

module.exports = { myMethod: myMethod };

    不需要任何其他东西 . 这将与Webpack提供的输出一起使用，您永远不必在Webpack的输出中更改任何内容 . Webpack将根据需要自动执行需要，以正确的顺序为您实例化模块 .

    回复于

相关问题