asp.net-mvc - Typescript equivalent of inline JavaScript
问题描述
This may be self-evident but I'm not finding any example that informs what I'm trying to do (maybe I'm just doing it wrong). I'm adding Vue to an existing ASP.NET Core MVC application and adding the JavaScript statements directly to the page works but when I try to migrate to a TypeScript file nothing happens.
The JavaScript is:
new Vue({
el: "#productPage",
data: {
isLoading: true
},
methods: {
},
mounted () {
console.log("mounted()");
this.isLoading = false;
}
});
This works as expected. Migrating the code to a TypeScript file productPage.ts
:
import Vue from 'vue';
new Vue({
el: "#productPage",
data: {
isLoading: true
},
methods: {
},
mounted () {
console.log("mounted()");
this.isLoading = false;
}
});
Which generates:
(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
And including the generated javascript file productPage.js
:
<script src="~/js/productPage.js"></script>
This does nothing. Stepping through the debugger neither of the conditions in function(factory)
are satisfied. The console tells me You are running Vue in development mode.
but the included JavaScript fails to run. The tsconfig.json
used to generate the JavaScript file:
{
"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"
]
}
Using "module": "commonjs"
results in ReferenceError: exports is not defined
. I was hoping to avoid having to use Browserify or Webpack.
解决方案
If I understand you correctly you add Vue in a separate script tag before your productPage.js.
This means that you can't import Vue in your TypeScript file, but you need to declare Vue so the module just assumes that Vue has been loaded already (outside of your TS module).
declare const Vue; // this replaces your Vue import statement
If you want to add a bundler later on, you need to remove your script tag which loads Vue and only go the modular approach: Vue needs to be imported with an import statement so the bundler knows that he has to include all of Vue. You will then have one single JS file (or if your bundler splits it: multiple JS files).
推荐阅读
- c# - 自定义模型绑定器触发并运行,但永远不会绑定属性值
- php - PHPUNIT - 测试作为类新实例的回调
- docker - 在 nginx-proxy 中添加 CORS 标头会附加值而不是覆盖它
- git - 如何使用 Github Actions 签出最新提交?
- angular - 角度表搜索过滤器
- excel - 使用 VBA 使按钮文本中的字母变为粗体
- amazon-web-services - 如何在 Amplify 中配置 GraphQL 转换以在创建 GraphQL API 时包含更多查询/突变/订阅
- google-bigquery - 如何在日志中查找谁删除了表
- vb.net - 使用 -file 参数启动时的不同行为
- apache-kafka - 当acks = all时是否可以记录或处理自动kafka生产者重试