如何使用 Webpack 和 SystemJS 检测正确的主体尺寸？

Question

我正在做一个 Angular2 库，它必须与 SystemJS 和 Webpack 兼容。对于一个组件，我需要检测 body 标签的高度和宽度（以像素为单位），以便为子标签设置以像素为单位的尺寸。 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

为什么会有不同的结果？怎么会有相同的结果？

Answer 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('./'));
 });

如何使用 Webpack 和 SystemJS 检测正确的主体尺寸？

How to detect the right body dimension with Webpack and SystemJS?

angular

typescript

webpack

systemjs

`foo.component.ts`

`SystemJS result`

`Webpack result`

硬编码

gulp 从库注入