[英]Importing angular in typescript using webpack load
互联网上的大家好! 今天,我向您介绍另一个问题! (好极了?)
我在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'
}
]
}
我认为您误解了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
并返回结果。 这应该不会给您造成任何问题,并且实际上没有两次加载任何东西。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.