为什么 require("angular") 返回一个空对象答案

【问题标题】：why require("angular") returns an empty object为什么 require("angular") 返回一个空对象
【发布时间】：2016-06-04 21:49:27
【问题描述】：

我已经这样配置了 webpack：

resolve: {
    alias: {
        angular: path.join(__dirname, './node_modules/angular/angular.js')
    }
},

在我的文件中，我需要这样的角度：

var angular = require("angular");

但是由于某种原因返回了一个空对象，为什么？

【问题讨论】：

Angular 1 不支持 CommonJS 模块，因此它“导出”一个空对象。相反，只需要它（不分配结果）： require('angular')
是的，它现在可以工作了，谢谢，你能把它作为答案发布吗？
请检查我的答案

标签： javascript angularjs webpack

【解决方案1】：

Angular 1 不支持 CommonJS 模块，因此它“导出”一个空对象。

相反，只需要它（不分配结果）：

 require('angular')

【讨论】：

【解决方案2】：

概念性答案 -

Angular 1.x 不支持CommonJS 模块，这就是为什么以下导出方法会产生empty object：

var angular = require("angular");

所以最好省略var angular 部分，只使用require("angular");

【讨论】：

【解决方案3】：

其他答案不太准确 - 核心 angular.js 文件确实不支持 CommonJS，但如果您从 NPM 安装它，则会提供一个名为 index.js 的小包装文件。它实际上只有两行：

require('./angular'); // Runs angular.js, which attaches to the window object
module.exports = angular; // Exports the global variable

这允许您在 CommonJS 环境中像正常一样使用它。因此，如果您像这样更新配置，它应该可以工作：

resolve: {
    alias: {
        angular: path.join(__dirname, './node_modules/angular/index.js')
    }
},

（也就是说，这应该是 Webpack 的默认行为，即使您不使用别名 angular，因为 index.js 在其 package.json 中被标记为 Angular 的主文件 - 您可能只使用不使用别名就可以逃脱完全没有！）

【讨论】：

太好了，谢谢你的建议，我一定会试试的
这对我帮助很大！谢谢！
无论出于何种原因，该包装器都无法解决问题。 require('angular') 之后的“角度”变量是一个空对象，但 window.angular 包含正确的角度对象。因此需要这个加载器配置： {test: require.resolve('angular'),loader: 'exports?window.angular'},
@Motin：嗯，这很奇怪，它确实曾经对我有用，而无需填充导出。也就是说，这可能是我的项目设置的一个怪癖，或者 Angular 的更改可能会破坏它。感谢您提供更新的答案！

【解决方案4】：

其他答案没有提供有效的解决方案。确实，Angular 1 不能很好地与开箱即用的 webpack 一起工作（请参阅https://github.com/webpack/webpack/issues/2049），但它可以通过 shim 加载。试试这个 webpack 加载器配置：

module: {
    loaders: [
        /*
         * Necessary to be able to use angular 1 with webpack as explained in https://github.com/webpack/webpack/issues/2049
         */
        {
            test: require.resolve('angular'),
            loader: 'exports?window.angular'
        },
    ]
},
plugins: [
    new webpack.ProvidePlugin({
        'angular': 'angular',
    }),
],

这应该正确初始化 angular 对象，而不是将其设置为空对象（没有名为 module 的属性）的默认操作。

【讨论】：