Question

我有webpack将所有单独的JS组件构建到bundle components.bundle.js

中

组件的一个例子：

import { Component, ViewChild } from '@angular/core';
import { IonicPage, NavController, AlertController, NavParams } from 'ionic-angular';
import { AngularFireAuth } from 'angularfire2/auth';
import { ChatPage } from '../chat/chat';

@IonicPage()
@Component({
  selector: 'page-login',
  templateUrl: 'login.html',
})

export class LoginPage {

  username: string= '';
  password: string= '';

  constructor(private fire: AngularFireAuth, public navCtrl: NavController, private alertCtrl: AlertController, public navParams: NavParams) {
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad LoginPage');
  }

  alert(message: string) {
    this.alertCtrl.create({
      title: 'Info!',
      subTitle: message,
      buttons: ['OK']
    }).present();
  }

  signInUser() {  
    username= this.username;
    message= this.message;
    
    this.fire.auth.signInWithEmailAndPassword(this.username, this.password).then(data=> {
    console.log('got data', this.fire.auth.currentUser);
    this.alert('Success! You\'re logged in');
    this.navCtrl.push(ChatPage);

    }).catch(error => {
      console.log('got an error', error);
      this.alert(error.message);
    })
    console.log('Would sign in with ', this.username, this.password)
  }
}

然后我有一个静态的html页面，其中包含我的components.bundle.js，但我不知道如何使用这些组件，因为我认为我可以这样做：

export class Comp1 {
  test() {
    console.log('worked');
  }
};

但是这不起作用，我错过了什么？谢谢！

Answer 1

当您运行webpack并获得bundle.js时，您可以将其添加为脚本，如下所示：

<script src="path/to/my/bundle.js"></script>

您希望执行的所有操作（如创建此类的实例并访问其成员）以及您希望合并到项目中的任何其他逻辑应该与您在代码示例中完成的操作相同您已经提供，也就是说，它应该远离包含bundle.js的实际HTML。您可以通过创建更多文件来实现这一目标，这些文件将保存并引用您编写的其他逻辑。

重点是，不建议在布局页面内处理业务逻辑。

例如：

写不正确

export class Comp1 {
  test() {
    console.log('worked');
  }
};

并按此访问

<html>
  <head>
    <script type="text/javascript" src="./components.bundle.js" 
    charset="utf-8"></script>
  </head>
  <body>
    <script>
      var comp1 = new Comp1();
      comp1.test();
    </script>
  </body>
</html>

正确撰写

  export class Comp1 {
    test() {
      console.log('worked');
    }
  };

这样访问（最有可能在另一个.js文件中，比如main.js）

var comp1 = require('path/to/my/component')

comp1.test()

这里的外卖点是你的代码必须是自包含的;功能（工作）本身（不需要HTML），它必须执行它所需的所有任务，而不必注入任何东西。在大多数情况下，注入HTML文件应仅用于在浏览器中提供此逻辑，以便能够直观地看到其效果。

如何在静态html文件中包含webpack块？

1 个答案: