使用Webpack加載在TypeScript中導入angular

Question

互聯網上的大家好！ 今天，我向您介紹另一個問題！ （好極了？）

我在ts-loader中使用webpack來編譯打字稿代碼。 但是，當我像這樣導入角度時：

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

它實際上正在導入2個腳本，如下所示：

[18:11:21] Starting 'build'...
ts-loader: Using typescript@2.0.6 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'
    }
  ]
}

Answer 1

我認為您誤解了webpack的工作原理。 無論您需要多少次，所有模塊都會執行一次。 例如，如果您這樣做：

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

angular腳本僅真正執行一次，結果“緩存”為所有隨后的require調用。

就您而言，您所看到的完全正常。 當從npm包中加載angular時，npm包使用index.js ，如下所示：

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

在npm軟件包中，通常有一個最小的index.js可以重新導出另一個腳本。 當您使用webpack加載時，webpack將加載index.js ，這反過來又將加載angular.js並返回結果。 這應該不會給您造成任何問題，並且實際上沒有兩次加載任何東西。