【问题标题】：How to detect the right body dimension with Webpack and SystemJS?如何使用 Webpack 和 SystemJS 检测正确的身体尺寸？
【发布时间】：2017-03-07 09:28:06
【问题描述】：

我正在做一个 Angular2 库，它必须与 SystemJS 和 Webpack 兼容。对于一个组件，我需要检测主体标签的高度和宽度（以像素为单位），然后为子标签设置以像素为单位的尺寸。 Angular LifeCycle 的 SystemJS 和 Webpack 之间的行为会产生不同的结果。我这样做是为了解释它：

`foo.component.ts`

ngOnChanges() {
    console.log("ngOnChanges : " + document.body.clientHeight);
}

ngOnInit(){
    this.elHTML.setAttribute("direction", this.direction.toString());
    console.log("ngOnInit : " + document.body.clientHeight);
}

ngDoCheck() {
    console.log("ngDoCheck : " + document.body.clientHeight);
}

ngAfterContentInit() {
    console.log("ngAfterContentInit : " + document.body.clientHeight);
}

ngAfterContentChecked() {
    console.log("ngAfterContentChecked : " + document.body.clientHeight);
}

ngAfterViewInit() {
    console.log("ngAfterViewInit : " + document.body.clientHeight);
}

ngAfterViewChecked() {
    console.log("ngAfterViewChecked : " + document.body.clientHeight);
    this.widthHeightApply();
}

widthHeightApply(){
    var offsetWidth : number = document.body.clientWidth;
    var offsetHeight : number = document.body.clientHeight;
    ...
}

`SystemJS result`

ngOnChanges : 767
ngOnInit : 767
ngDoCheck : 767
ngAfterContentInit : 767
ngAfterContentChecked : 767

`Webpack result`

ngOnChanges : 40
ngOnInit : 40
ngDoCheck : 40
ngAfterContentInit : 206
ngAfterContentChecked : 206

为什么会有不同的结果？怎么可能有同样的结果？

【问题讨论】：

实际上，我在使用 webpack 的两个不同项目之间有同样的问题：Angular2-Webpack-starter (body width : "1583px") & preboot/angular-webpack (body width: "1600px")... 注意：不同之处在于 Firefox 上的滚动条宽度：17px。

标签： angular typescript webpack systemjs

【解决方案1】：

我找到了解决方案。关于正文宽度，实际正文宽度（1600px）与控制台显示的宽度（“1583px”）之间的差异是由于加载Angular页面所致。在加载 Angular 项目之前，index.html 文件没有 CSS 样式，这意味着正文和滚动条有一个边距。这就是为什么在加载过程中，页面在晃动。解决方法是直接在 index.html 的中插入 normalize.css ，如下所示：

硬编码

index.html

<head>
 <meta charset="utf-8">
 <meta http-equiv="x-ua-compatible" content="ie=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1">

 <title><%= htmlWebpackPlugin.options.title %></title>

 <meta name="description" content="<%= htmlWebpackPlugin.options.title %>">

 <% if (webpackConfig.htmlElements.headTags) { %>
   <!-- Configured Head Tags  -->
   <%= webpackConfig.htmlElements.headTags %>
 <% } %>

 <!-- base url -->
 <base href="<%= htmlWebpackPlugin.options.metadata.baseUrl %>">

 <!-- Normalize.css (the solution) -->
 <link rel="stylesheet" type="text/css" href="./styles/normalize.css" />
</head>

来自库的 gulp 注入

就我而言，我正在制作一个 npm 包。在安装过程中，我的库的 gulfile.js 在 index.html 中注入了这个 css 代码行。我使用gulp-insert-lines 这样做：

package.json

{
 ...
 "scripts": {
   "postinstall": "gulp install --gulpfile gulpfile.js",
 ...

}

gulpfile.js

var insertLines = require('gulp-insert-lines');
... 
gulp.task('install', function() { 
     return gulp.src(indexPath + 'index.html', {base: './'})
                  .pipe(insertLines({
                  'before': /<\/head>$/,
                  'lineBefore': '<link rel="stylesheet" type="text/css" href="./styles/normalize.css" />'
            }))
            .pipe(gulp.dest('./'));
 });

【讨论】：