更多

Question

我想开发一个我可以攻击脚本的网页，该网页位于bundle.js文件中。

问题是我不能为我的生活让我的课程变得可见我的HTML。我相信这一定是一件简单的事情吗？

首先，我的打字稿 first.ts

export class Startup
{
    constructor(){    
        console.log("Startup class initialized!")  ;
    }


    ShowTime(todayDate : Date) : string {
        if(todayDate == null)
            throw new Error("todayDate cannot be null");

        return "Time supposedly is  -- " +  todayDate;         
    }

    public static worker = new Startup();
}

然后，我有相应的html文件：

<html>
    <head>            
        <script src="dist/bundle.js"></script>        
    </head>
    <body>
        <button onclick="doIt();">Show Time</button>
        <br />
        <h2 id="h2Msg" style="color:red;"></h2> 
    </body>
    <script>

        function doIt(){
            var element = document.getElementById("h2Msg");
            element.innerHTML = Startup.worker.ShowTime(new Date());
        }
    </script>
</html>

我有一个工作的tsconfig.json

{
  "compilerOptions": 
  {
    "target": "es3",      /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', or 'ESNEXT'. */
    "module": "es2015", /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */
    "sourceMap": true,    /* Generates corresponding '.map' file. */
    "rootDir": "src/",    /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */   
    "outDir": "dist/",     
  },
  "include": [
    "src/*",
    "*"
  ],
  "exclude": [
    "node_modules",
    "**/*.spec.ts",
    "**/*.test.ts"
  ]
}

接下来是package.config：

{
  "name": "testsetup",
  "version": "1.0.0",
  "description": "",
  "main": "webpack.config.js",
  "dependencies": {
    "ts-loader": "^3.3.1",
    "typescript": "^2.6.2"
  },
  "devDependencies": {
    "@types/chai": "^4.1.2",
    "@types/mocha": "^2.2.47",
    "babel": "^6.23.0",
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "chai": "^4.1.2",
    "mocha": "^5.0.0",
    "ts-node": "^4.1.0",
    "typings": "^2.1.1"
  },
  "scripts": {
    "run": "webpack --watch",
    "test": "mocha -r ts-node/register src/**/*.test.ts"
  },
  "author": "digitaldias",
  "license": "ISC"
}

最后，webpack.config.js：

var path = require('path');

module.exports = {
  entry : './src/first.ts',
  resolve : {
    extensions : ['.webpack.js', '.web.js', '.ts', '.js']
  },
  module : {
    loaders : [
      { test : /\.ts$/, loader: 'babel-loader!ts-loader'}      
    ]
  },
  output : { 
    filename : 'bundle.js',
    path : path.resolve(__dirname, 'dist')    
  }
}

当我使用npm run运行它时，我看到构造函数日志消息，但是，我无法附加到bundle.js中生成的任何代码。

我想要实现的是，当单击html中的按钮时，将调用启动类方法 ShowTime（）的静态实例。

我是否应该使用webpack，或者是其他更简单的方法来实现这一目标？

这不是node.js问题:)

提前致谢

Answer 1

从你的代码：

<script>

    function doIt(){
        var element = document.getElementById("h2Msg");
        element.innerHTML = Startup.worker.ShowTime(new Date());
    }
</script>

您希望公开名为Startup的全局。 Globals 不是什么模块。

即。你不会export，因为你没有使用模块

更多

我建议不要做全局变量而只使用模块。您可以将所有代码移到您的应用中，并且不会污染index.html。

Answer 2

我发现对我自己的问题的回答似乎很接近：

而不是尝试执行我的任何打字稿代码，而是明确地从该代码附加了必要的事件：

import { UserAgentApplication } from 'msal';

class Startup
{
    token : string;

    constructor()
    {    
        console.log("Startup class initiliazed")  ;
    }


    AddButtonClickEvent(){
        var button = document.getElementById("daButton");
        button.addEventListener("click", () => {
            var clientId  = "00000000-0000-0000-0000-000000000000";
            var authority = "https://login.microsoftonline.com/common";
            var app = new UserAgentApplication(clientId, authority, Startup.worker.onTokenReceived,);
            app.loginPopup(["User.Read"]);        
        }, false);
    }


    onTokenReceived(errorDesc:string, token:string, error:string, tokenType:string)
    {
        if(error.length == 0)
        {
            this.token = token;
            var e = document.getElementById("h2Msg");
            e.innerHTML = "Signed in";
        }
    }
    static worker = new Startup();
}


window.onload = function()
{   
    Startup.worker.AddButtonClickEvent();
}

类启动创建一个自身的静态实例，然后在 window.onload 事件期间连接到我的html中的按钮。

显然，我不能包括bundle.js和＆＃34; hit＆＃34;其中的代码。如果有人知道该怎么做，我会感激不尽！

如何为某些胖客户端开发正确配置WebPack和TypeScript

2 个答案:

更多