Question

我正在使用Webpack编写Angular应用程序。

我有一个用户配置文件JavaScript对象，我希望通过内联脚本模板到索引页面，以提高性能，这样客户端就不会再发出请求并延迟其余的页面加载。

使用requirejs可以命名内联模块，以便以后可以依赖它。有没有办法做这个webpack？还是我坚持宣布它是一个全球性的？

作为一个例子，你可以在Require JS中做些什么;

<html>
<body>
...
<script>
define('userProfile', [
  'angular'
], function(angular) {
  return angular.module('userProfile', [])
    .constant('userProfile', Object.freeze({
      id: '$!{user.userid}',
      name: '$!{user.fullname}',
      userType: '$!{user.userType}'
    }))
});
</script>
...
</body>
</html>

在提供索引页面时，会模仿'$!{user.userid}'等用户字段。

要在您的应用中依赖此功能，您可以执行类似

的操作

define([
    'userProfile',
], function() {    
  return angular.module('my-app', [
        'userProfile',
  ]);
});

Answer 1

您可以在webpack配置中指定一个外部变量或模块，以便您只需通过脚本标记将其包含在页面上。这就是我用我的脚本跳过库捆绑包

// webpack.config.js
 "externals": {
            "jquery": "jQuery",
            "angular": "angular"
        },

但是作为角色工作，您不需要使用webpack导入模块

<script>
(function(angular) {
  angular.module('userProfile', [])
    .constant('userProfile', Object.freeze({
      id: '$!{user.userid}',
      name: '$!{user.fullname}',
      userType: '$!{user.userType}'
    }))
})(angular);
</script>

在你的模块中，你可以。

angular.module('whatever', ['userProfile'])

现在，您可以在角度应用程序的任何位置使用用户配置文件常量。

angular.module('whatever').controller(['userProfile', function (userProfile) {}]);

您只需要确保在捆绑包

之前执行userProfile脚本

导入内联的js脚本webpack

1 个答案: