使用Webpack加载在TypeScript中导入angular

卢卡斯·陈(Lukas Chen)

互联网上的大家好!今天,我向您提出另一个问题!(耶?)

我在ts-loader中使用webpack来编译打字稿代码。但是,当我像这样导入angular时:

import * as angular from "angular";
angular.module("app", []);

它实际上正在导入2个脚本,如下所示:

[18:11:21] Starting 'build'...
ts-loader: Using [email protected] and C:\testProject\tsconfig.json
[18:11:24] [webpack] Hash: 155db0dc394ae32ae9e6
Version: webpack 1.13.2
Time: 2845ms
 Asset     Size  Chunks             Chunk Names
app.js  3.11 MB       0  [emitted]  main
chunk    {0} app.js (main) 1.19 MB [rendered]
    [0] ./app/app.module.ts 2.26 kB {0} [built]
    [1] ./~/angular/index.js 48 bytes {0} [built]
    [2] ./~/angular/angular.js 1.19 MB {0} [built]
  • index.js:角度库代码的入口点
  • angular.js:角度库

这是一个问题,因为index.js还加载了角度库,结果是两次加载了角度库

这是我的webpack.config.js

entry: "./app/app.module.ts",

output: {
  publicPath: "/lib/",
  path: path.join(__dirname,"lib"),
  filename: "app.js"
},

// source map
devtool: "#inline-source-map",

module: {
  loaders: [
    {
      test: /\.ts$/,
      // Exclude node modules
      exclude: [/node_modules/],
      loader: 'ts-loader'
    },
    {
      test: /\.html$/,
      // Exclude node modules
      exclude: [/node_modules/],
      loader: 'raw-loader'
    }
  ]
}
dtabuenc

我认为您误解了webpack的工作原理。无论您需要多少次,所有模块都会执行一次。例如,如果您这样做:

 var angular = require('angular');
 var anotherAngular = require('angular');

angular脚本实际上只会执行一次,并且对所有后续调用都会“缓存”结果require

就您而言,您所看到的完全正常。当您从npm包中加载角度时,npm包将使用index.js,如下所示:

require('./angular');
module.exports = angular;

在npm软件包中,通常index.js只有很少的内容可以重新导出另一个脚本。当您使用webpack加载时,webpack将会加载index.js,这将依次加载angular.js并返回结果。这不会给您造成任何问题,并且两次加载都没有。

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章