Question

我有一个问题让我很困惑，所以我想在这里分享。在我的打字稿项目中，我有一个名为index.ts

的入口点。

使用此index.ts导入其他类，该类也通过导入调用其他类。

为了将所有文件绑定到一个文件，我使用了Web pack，最后，我得到了bundle.js文件。问题是，当我将此bundle.js文件包含在文件夹内的HTML页面中，并且尝试访问该bundle.js时，js文件不建议我任何功能或其他内容。但是，如果我手动编写该函数的名称并在浏览器中检查它是否起作用。接下来，我将分享我的代码并使它更加清晰：）

这是我的index.ts文件

import {Location} from './Location'

let a = new Location(10,29)

export function start() {
    a.createLocationKeyMaterial(5)
}

export function deneme() {
    console.log("ahmet")
}

这是我的webpack.config文件

var path = require("path");

module.exports = {
   entry: './src/index.ts',
   output: {
      filename: 'bundle.js',
      path: __dirname,
      libraryTarget: 'var',
      library: 'lockum',
   },
   module: {
      rules: [{
            test: /\.ts$/,
            loader: 'ts-loader',
            exclude: /node_modules/,
         },
         {
            test: /\.hbs$/,
            loader: 'handlebars-loader',
            exclude: /node_modules/,
            query: {
                helperDirs: [
                  path.resolve(__dirname, "template", 'helpers')
                ]
              }
         }
      ]
   },
   resolve: {
      extensions: [".ts", ".js", ".hbs"]
   }
}

我调用的html页面

<!DOCTYPE html>
<html>
<head>
    
    <script src="../bundle.js"></script>
    <script src="example.js"></script>
    <script src= "letssee.ts"></script>

</head>
<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body>
</html>

lockum.start()

所以在这里，当我在example.js文件中键入soemthing时，如果我写了lockum，则提示我，但是在lockum之后键入“”。它不建议我任何功能。

和bundle.js的内容如下

var lockum = function(t) {
  var i = {};

  function n(e) {
    if (i[e]) return i[e].exports;
    var o = i[e] = {
      i: e,
      l: !1,
      exports: {}
    };
    return t[e].call(o.exports, o, o.exports, n), o.l = !0, o.exports
  }
  return n.m = t, n.c = i, n.d = function(t, i, e) {
    n.o(t, i) || Object.defineProperty(t, i, {
      configurable: !1,
      enumerable: !0,
      get: e
    })
  }, n.r = function(t) {
    Object.defineProperty(t, "__esModule", {
      value: !0
    })
  }, n.n = function(t) {
    var i = t && t.__esModule ? function() {
      return t.default
    } : function() {
      return t
    };
    return n.d(i, "a", i), i
  }, n.o = function(t, i) {
    return Object.prototype.hasOwnProperty.call(t, i)
  }, n.p = "", n(n.s = 2)
}([function(t, i, n) {
  "use strict";
  Object.defineProperty(i, "__esModule", {
    value: !0
  });
  var e = function() {
    function t() {}
    return t.calculateLocationKeyMaterial = function(t, i, n) {
      if (null == t || null == i) throw new Error("Location information has not been fetched.");
      var e = this.includeToleranceDistance(t, i, n);
      return console.log("key derivation function input should be: " + e), e
    }, t.includeToleranceDistance = function(t, i, n) {
      var e = !1,
        o = !1;
      return t < 0 ? t *= -1 : e = !0, i < 0 && (i *= -1, o = !0), t = this.convertToDegreesDecimalMinutes(t), i = this.convertToDegreesDecimalMinutes(i), t *= 1e4, i *= 1e4, e ? (t = Math.floor(t / (5.4 * n)), t = this.includeLocationSignBits(t, !0)) : (t = Math.floor(t / (5.4 * n)), t = this.includeLocationSignBits(t, !1)), o ? (i = Math.floor(i / (6 * n)), i = this.includeLocationSignBits(i, !0)) : (i = Math.floor(i / (6 * n)), i = this.includeLocationSignBits(i, !1)), t.toString() + i.toString()
    }, t.convertToDegreesDecimalMinutes = function(t) {
      var i = Math.floor(t),
        n = parseFloat((t % 1 * 60).toFixed(5).substring(0, 7));
      return parseFloat(i.toString() + n.toString())
    }, t.includeLocationSignBits = function(t, i) {
      return i ? 201326592 + t : (1 << 27) + t
    }, t.createLocationMaterials = function(t, i, n) {
      var e, o, r, c, a = !1,
        u = !1,
        l = new Array;
      if (t < 0 ? t *= -1 : t > 0 && (a = !0), i < 0 && (i *= -1, u = !0), t = this.convertToDegreesDecimalMinutes(t), i = this.convertToDegreesDecimalMinutes(i), t *= 1e4, i *= 1e4, a) {
        var s = t = Math.floor(t / (5.4 * n));
        t = this.includeLocationSignBits(t, !0), e = s - 1, e = this.includeLocationSignBits(e, !0), o = s + 1, o = this.includeLocationSignBits(o, !0)
      } else {
        s = t = Math.floor(t / (5.4 * n));
        t = this.includeLocationSignBits(t, !1), e = s - 1, e = this.includeLocationSignBits(e, !1), o = s + 1, o = this.includeLocationSignBits(o, !1)
      }
      if (u) {
        s = i = Math.floor(i / (6 * n));
        i = this.includeLocationSignBits(i, !0), r = s - 1, r = this.includeLocationSignBits(r, !0), c = s + 1, c = this.includeLocationSignBits(c, !0)
      } else {
        s = i = Math.floor(i / (6 * n));
        i = this.includeLocationSignBits(i, !1), r = s - 1, r = this.includeLocationSignBits(r, !1), c = s + 1, c = this.includeLocationSignBits(c, !1)
      }
      return l[0] = e.toString() + r.toString(), l[1] = e.toString() + i.toString(), l[2] = e.toString() + c.toString(), l[3] = t.toString() + r.toString(), l[4] = t.toString() + i.toString(), l[5] = t.toString() + c.toString(), l[6] = o.toString() + r.toString(), l[7] = o.toString() + i.toString(), l[8] = o.toString() + c.toString(), l
    }, t
  }();
  i.LocationHelper = e
}, function(t, i, n) {
  "use strict";
  Object.defineProperty(i, "__esModule", {
    value: !0
  });
  var e = n(0),
    o = function() {
      function t(t, i) {
        this.latitude = parseFloat(t.toFixed(6)), this.longitude = parseFloat(i.toFixed(6)), console.log(this.latitude), console.log(this.longitude)
      }
      return t.prototype.createLocationKeyMaterial = function(t) {
        return e.LocationHelper.calculateLocationKeyMaterial(this.latitude, this.longitude, t)
      }, t.prototype.createLocationKeyMaterials = function(t) {
        return e.LocationHelper.createLocationMaterials(this.latitude, this.longitude, t)
      }, t
    }();
  i.Location = o
}, function(t, i, n) {
  "use strict";
  Object.defineProperty(i, "__esModule", {
    value: !0
  });
  var e = new(n(1).Location)(10, 29);
  i.start = function() {
    e.createLocationKeyMaterial(5)
  }, i.deneme = function() {
    console.log("ahmet")
  }
}]);

Answer 1

TypeScript对JavaScript的支持不够聪明，无法从Webpack生成的复杂JavaScript代码中确定lockum变量的类型。相反，您可以将lockum复制到新变量，并使用JSDoc comment为其提供index.ts模块的类型。将以下内容添加到example.js的顶部：

/** @type {typeof import("./index")} */
var lockum2 = lockum;

（调整指向index.ts的路径。）

但是，最好将计划放入example.js中的代码添加到TypeScript模块中。

如何从webpack输出访问bundle.js函数

1 个答案: