相当于内联 JavaScript 的 Typescript

大卫克拉克

这可能是不言而喻的,但我没有找到任何说明我正在尝试做的事情的例子(也许我只是做错了)。我正在将 Vue 添加到现有的 ASP.NET Core MVC 应用程序,并将 JavaScript 语句直接添加到页面有效,但是当我尝试迁移到 TypeScript 文件时,没有任何反应。

JavaScript 是:

new Vue({
    el: "#productPage",
      data: {
        isLoading: true
    },
    methods: {
    },
    mounted () {
        console.log("mounted()");
        this.isLoading = false;
    }
});

这按预期工作。将代码迁移到 TypeScript 文件productPage.ts

import Vue from 'vue';

new Vue({
  el: "#productPage",
  data: {
      isLoading: true
  },
  methods: {
  },
  mounted () {
      console.log("mounted()");
      this.isLoading = false;
  }
});

产生:

(function (factory) {
  if (typeof module === "object" && typeof module.exports === "object") {
      var v = factory(require, exports);
      if (v !== undefined) module.exports = v;
  }
  else if (typeof define === "function" && define.amd) {
      define(["require", "exports", "vue"], factory);
  }
})(function (require, exports) {
  "use strict";
  Object.defineProperty(exports, "__esModule", { value: true });
  var vue_1 = require("vue");
  var HonestyBox;
  (function (HonestyBox) {
      new vue_1.default({
          el: "#productPage",
          data: {
              isLoading: true
          },
          methods: {},
          mounted: function () {
              console.log("Mounted !!!!");
              this.isLoading = false;
          }
      });
  })(HonestyBox || (HonestyBox = {}));
});
//# sourceMappingURL=productPage.js.map

并包括生成的 javascript 文件productPage.js

<script src="~/js/productPage.js"></script>

这没有任何作用。单步调试调试器中的任何一个条件function(factory)都不满足。控制台告诉我,You are running Vue in development mode.但包含的 JavaScript 无法运行。tsconfig.json用于生成JavaScript文件:

{
  "compileOnSave": true,
  "compilerOptions": {
    "module": "umd",
    "moduleResolution": "node",
    "noImplicitAny": false,
    "noEmitOnError": true,
    "removeComments": true,
    "sourceMap": true,
    "target": "es5",
    "outDir": "wwwroot/js"
  },
  "include": [
    "Typescript/**/*"    
  ],
  "exclude": [
    "node_modules",
    "wwwroot"
  ]
}

使用"module": "commonjs"的结果ReferenceError: exports is not defined我希望避免使用 Browserify 或 Webpack。

彼得

如果我理解正确,您可以在 productPage.js 之前在单独的脚本标签中添加 Vue。

这意味着你不能在你的 TypeScript 文件中导入 Vue,但你需要声明 Vue,这样模块就假设 Vue 已经被加载(在你的 TS 模块之外)。

declare const Vue; // this replaces your Vue import statement

如果你想稍后添加一个打包器,你需要删除加载 Vue 的脚本标签,只采用模块化方法:Vue 需要使用 import 语句导入,以便打包器知道他必须包含所有 Vue。然后您将拥有一个单一的 JS 文件(或者如果您的打包器将其拆分:多个 JS 文件)。

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

相当于$ .on的Javascript

来自分类Dev

相当于RNGCryptoServiceProvider的Javascript

来自分类Dev

相当于Jquery的Javascript

来自分类Dev

相当于JavaScript的Jframe

来自分类Dev

Apex 相当于 Javascript For In

来自分类Dev

JSDoc相当于Typescript的as const吗?

来自分类Dev

相当于 Flow 中的 TypeScript 记录?

来自分类Dev

TypeScript 相当于 Java 中的 static{}

来自分类常见问题

相当于JavaScript中的Python Pandas

来自分类Dev

相当于jquery ajaxStop的Javascript

来自分类Dev

相当于JQuery .next()的JavaScript

来自分类Dev

相当于R中的javascript reduce

来自分类Dev

相当于Java Regex的Javascript

来自分类Dev

相当于Javascript querySelector的Python

来自分类Dev

相当于jquery触发方法的javascript

来自分类Dev

相当于Ruby的`send`的Javascript

来自分类Dev

相当于PHP $ array [$ i] []的JavaScript

来自分类Dev

相当于jQuery not()的Vanilla Javascript

来自分类Dev

相当于锚href的javascript

来自分类Dev

相当于 jQuery onclick 的 Javascript

来自分类Dev

Android相当于setTimeout和javascript的clearTimeout?

来自分类Dev

JavaScript相当于?? C#中的运算符

来自分类Dev

相当于jQuery.param()的纯Javascript

来自分类Dev

Javascript相当于对象模型中的destruct

来自分类Dev

JavaScript相当于相对路径

来自分类Dev

获取键,“ this”的值:JavaScript的jQuery相当于什么?

来自分类Dev

相当于jQuery.param()的纯Javascript

来自分类Dev

相当于angularjs $ state.go的javascript

来自分类Dev

javascript:相当于新Class()的new instance.constructor()?