Ладно, для тех, кто борется с тем же топом c ... Разобрался. Теперь у вас может быть отлаживаемый TypeScript в вашем бритвенном проекте .NetCore.
Итак, вот шаги, которые вы должны выполнить:
- Убедитесь, что node.js установлен в Visual Studio . Просто запустите установщик Visual Studio, нажмите кнопку «Изменить» рядом с версией VS, найдите модуль Node.js и убедитесь, что он установлен.
- Выполните действия, необходимые для включения машинописного текста в ваш проект - следуйте этой небольшой статье: https://docs.microsoft.com/pl-pl/visualstudio/javascript/tutorial-aspnet-with-typescript?view=vs-2019
- Убедитесь, что у вас есть в вашем пакете. json такие вещи, как (внутри devDependencies):
"@types/jquery": "3.5.0",
"@types/bootstrap": "4.5.0",
"@types/jquery-validation-unobtrusive": "3.2.32"
и другие, которые вы используете. Это просто дает вам типы TypeScript для jQuery, bootstrap и jqueryValidation. JQuery, Bootstrap и JQueryValidation по умолчанию используются .NetCore Razor Pages / MVC, так что я полагаю, вы тоже используете его.
Убедитесь, что ваш tsconfig. json выглядит так:
{
"compilerOptions": {
"noImplicitAny": false,
"noEmitOnError": true,
"removeComments": false,
"sourceMap": true,
"target": "ES6",
"outDir": "wwwroot/js",
"esModuleInterop": true,
"module": "AMD",
"moduleResolution": "Node"
},
"compileOnSave": true,
"include": [
"scripts/**/*"
],
"exclude": [
"node_modules"
]
}
Я думаю, что наиболее важными здесь являются:
- target установлен на ES6 (но вы также можете попробовать с ES5)
- esModuleInterop установлен на true
- модуль установлен на AMD (это означает, что модули будут загружаться асинхронно - это по умолчанию для браузеров, я думаю
- moduleResolution установлен на Node
В ваших файлах .ts используйте экспорт и импорт. Например: person.ts:
export class Person
{
//your code here
}
export function foo()
{
//your code here
}
В другом файле, например:
import { Person } from "./person";
export class ClassThatUsesPerson
{
_person: Person;
//your code goes here
}
Просто убедитесь, что вы импортируете файл БЕЗ расширения «ts», поэтому : "./person" вместо "./person.ts". И "./" должен быть в начале
Вы можете импортировать другие библиотеки, которые вы используете и установили, используя npm - аналогично. Допустим, я использую библиотеку autonumeri c, которую я установил с помощью npm, поэтому в свой файл я импортирую ее следующим образом:
import AutoNumeric from 'autonumeric'
Загрузить библиотеку: требуется JS (вы найдете его в Google) Внесите некоторые изменения в свой _Layout.cs html:
- избавьтесь выкл. jQuery и bootstrap из шапки. При условии, что ваш запрос JS скопирован в: "~ / libs / require js. js", вы должны включить его следующим образом:
<script src="~/lib/requirejs.js"></script>
<script src="~/js/entrypoint.js"></script>
Теперь я предполагаю что вы будете хранить файлы js в папке «~ / js». Итак, теперь вы должны создать там точку входа. js, которая должна выглядеть так:
requirejs.config({
baseUrl: "/js",
shim: {
bootstrap: {
"deps": ["jquery"]
}
},
paths: {
jquery: "https://ajax.googleapis.com/ajax/libs/jquery/3.5.0/jquery.min",
bootstrap: "https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.bundle.min",
"jquery-validation": "https://cdn.jsdelivr.net/npm/jquery-validation@1.19.2/dist/jquery.validate.min",
"jquery.validate.unobtrusive": "https://cdnjs.cloudflare.com/ajax/libs/jquery-validation-unobtrusive/3.2.11/jquery.validate.unobtrusive.min"
}
});
require(["jquery", "bootstrap", "app"], function (jq, bs, app) {
app.App.init();
});
Теперь кое-что: Вначале вам нужно настроить требуемый js lib (go на требуется js домашняя страница и прочтите о конфигурации). Вкратце: baseUrl - это место по умолчанию, где require js будет искать ваши js файлы shim - это необходимо для bootstrap для правильной работы paths - здесь вы можете определить пути к вашим модулям . Просто добавьте сюда библиотеки, которых у вас нет в папке JS и которые можно получить из CDN или чего-то подобного. Эти три здесь (jQuery, bootstrap и jQuery проверки) необходимы, если вы используете jquery, bootstrap и jquery проверки :) Важно - убедитесь, что вы включили сюда bootstrap .bundle. min вместо bootstrap .min. В версии пакета есть некоторые ссылки внутри (например, на popper. js), что значительно упрощает работу.
ВНИМАНИЕ! Имя модулей: "jquery-validation" и "jquery.validate.unobtrusive" важные. Эти модули должны называться именно так (особенно jquery -validation). В противном случае проверка не будет работать.
Теперь, после завершения настройки, вы можете увидеть в моем файле:
require(["jquery", "bootstrap", "app"], function (jq, bs, app) {
app.App.init();
});
Это просто говорит: Now load, jquery module, bootstrap module and app module. Обратите внимание, что модуль приложения - это мой нестандартный класс. init () - это stati c функция внутри класса App. Я делаю здесь вещи, которые обычно go to document.ready или body.onload.
На последнем шаге - убедитесь, что в вашем коде НЕТ <script src="...">. Теперь, используя require js, вы загружаете каждый скрипт с помощью функции require.
Так, например, где-нибудь на вашей странице вместо:
<script src="~/js/person.js"></script>
вы должны иметь:
require(["person"]);
или даже, если человек является классом, и вы хотите создать его объект:
var personObj;
require(["person"], function(personFile) {
personObj = new personFile.Person();
});
Вот и все. Действительно просто, не правда ли? ;) Ура!