(Да, это Белла Абзуг. Она баллотировалась на пост мэра против Эда Коха в 1977 году, и все думали, что она выиграет. Затем произошло отключение электроэнергии, разграбление, и Эд Кох получил голосование за закон и порядок и победил. Я беру случайный изображения из моих фотографий, и это было получено из писательского проекта, когда я исследовал период.)
Это выглядело забавно, и мне понравились все расширения, которые мне нужно было установить, lint и Wallaby, а затем еще куча вещей с диспетчером пакетов узлов. В первый раз я создал файл package.json, так что, да, в первый раз. В этой статье не упоминается, что
npm init
теперь проводит вас через серию запросов для заполнения полей JSON для структуры, которую вы создаете, похоже, что в прошлом это делалось незаметно.
Это был материал из диспетчера пакетов узлов.
$ npm install --save-dev browser-sync $ npm install --save-dev browserify $ npm install --save-dev chai $ npm install --save-dev gulp $ npm install --save-dev gulp-istanbul $ npm install --save-dev gulp-mocha $ npm install --save-dev gulp-sourcemaps $ npm install --save-dev gulp-tslint $ npm install --save-dev gulp-typescript $ npm install --save-dev gulp-uglify $ npm install --save-dev run-sequence $ npm install --save-dev tslint $ npm install --save-dev typescript $ npm install --save-dev vinyl-buffer $ npm install --save-dev vinyl-source-stream
Я быстро рассмотрю каждый из них. Важно: убедитесь, что вы находитесь в каталоге проекта TypeScript, в котором находится файл package.json, он нужен этим установкам.
ПОЗЖЕ:
Были инструкции по изменению настроек пользователя и настроек рабочего пространства из меню настроек, но на самом деле сейчас там только «Настройки», и он открывает настройки пользователя. Чтобы открыть настройки рабочего пространства на Mac, вам нужно нажать cmd-shift-p и ввести «Открыть настройки рабочего пространства», и команда будет там в списке.
ПРИМЕЧАНИЕ: убедитесь, что вы открываете свой проект ИЗ каталога проекта, чтобы правильно сохранить эти настройки. Я совершил ошибку, открыв проект B из проекта каталога A, поэтому мои настройки, которые я ожидал прикрепить к B, были установлены в каталог A.
AH HA, поскольку я npm установил все те пакеты, которые они были добавлены в devDependencies в package.json, в конце:
{
"name": "ts-vscode-boilerplate",
"version": "1.0.0",
"description": "for test",
"main": "index.js",
"scripts": {
"test": "none"
},
"repository": {
"type": "git",
"url": "none"
},
"keywords": [
"none"
],
"author": "prenez",
"license": "UNLICENSED",
"devDependencies": {
"browser-sync": "^2.18.13",
"browserify": "^14.4.0",
"chai": "^4.1.2",
"gulp": "^3.9.1",
"gulp-istanbul": "^1.1.2",
"gulp-mocha": "^4.3.1",
"gulp-sourcemaps": "^2.6.1",
"gulp-tslint": "^8.1.2",
"gulp-typescript": "^3.2.2",
"gulp-uglify": "^3.0.0",
"run-sequence": "^2.2.0",
"tslint": "^5.7.0",
"typescript": "^2.5.2",
"vinyl-buffer": "^1.0.0",
"vinyl-source-stream": "^1.1.0"
}
}
Двигаясь дальше, мы ввели код require () для включения зависимостей в gulfile.js в проект, а затем написали gulp.task. Итак, я предполагаю, что gulp - это диспетчер задач. Хм, также нужно посмотреть, что такое разработка MEAN.
вот файл JSON tslint, который использует этот проект для настройки Lint.
Этому парню наплевать на Grunt или Gulp, слишком много крафта со временем, он утверждает, что NPM - лучший способ.
Примечание: модули CommonJS явно используются в проекте, однако, как правило, CommonJS (серверный JavaScript без необходимости запускать его в браузере) был вытеснен Node.js. Node.js компилирует и запускает сценарии узлов и разбивает большие объемы данных на потоки узлов, отсюда и название. Узловые потоки разбиваются на части и доставляют данные управляемыми частями.
Gulp.js также является системой сборки потоковой передачи узлов. Он передает данные и изменяет исходные файлы только в конце процесса. Grunt имеет большую базу пользователей и создает временные файлы на каждом этапе процесса, что оставляет отличный след, но замедляет работу. Gulp работает быстрее, но у него меньше пользователей.
Gulp можно сравнить с Gradle в мире Android и Java, если вы ими пользовались.
Gradle выполняет сборки и управление зависимостями. В мире iOS XCode - это инструмент сборки, а CocoaPods - инструмент сообщества, широко используемый для управления зависимостями.
Это немного не по теме, но все это прямо у меня в голове.
NPM выполняет управление зависимостями на земле Node.js. Сам Node - это среда выполнения JavaScript, на которую в значительной степени приземлилось сообщество, и, как я сказал ранее, она вытеснила материал CommonJS.
We are going to write a Gulp task and use Browserify to transom many CommonJS into one single file that can be loaded by a web browser.
Ах, ха, вот что делает Browserify: он использует преимущества CommonJS и превращает его в мусор, который снова будет запускаться в браузере.
We have also used uglify to reduce the size of the resulting bundled file and increase the performance of our application.
вот что делает uglify.
Sourcemaps allow us to debug the bundle file in chrome and see the original TypeScript code instead of the compressed JavaScript code.
и это то, что делает sourcemaps.
…. позже в тот же день…
Создал простое приложение hello world в VS Code и создал tasks.json, launch.json и tsconfig.json. Итак, успешно я создал задачу сборки, запустил ее, успешно создал программу запуска, запустил приложение и отладил его.
Да, как я и думал, «сложная» часть здесь - это только прохождение первых сборок. JSON имеет своего рода XML-менталитет, все изложено чрезвычайно многословно, что позволяет легко находить материал, ПОСЛЕ ИНТЕРНАЛИЗАЦИИ ФОРМАТОВ, но до тех пор, пока у вас не будет этого ах-ха-момента, вы начинаете с множества непослушных глупостей.
ага, вам нужно изменить «исходные карты», если вы хотите установить точки останова в TypeScript, это интересно. В противном случае вы можете устанавливать точки останова только в javascript.
Это не сработало, черт возьми. Кажется, я все еще могу устанавливать точки останова только в JavaScript, или когда я устанавливаю их в TypeScript, запуск останавливается в странных местах.
столкнулся с проблемами с этим
и это удалось. Пришлось установить расширение отладки Chrome в Code, затем выключить и перезапустить Code, прежде чем он распознает тип «chrome» в файле launch.json. Затем магия.
/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222
вот как вы запускаете браузер в Mac OS, проникая в грязные глубины папки App.
{
"name": "Launch 9222",
"type": "chrome",
"request": "attach",
"port": 9222,
"sourceMaps": true
}
Вот как вы настраиваете его в Launch.json в Code. Затем вы переключаетесь в режим отладки в коде и выбираете из списка «Присоединить 9222». Работает отлично.
Момент высочайшего удовлетворения, когда вещь просто работает.
Я понимаю, что сегодня это было немного беспорядочно, я прошел большой путь, а также взял отличную книгу Натана Розентальса, MASTERING TYPESCRIPT Second Edition, в форме Kindle. Я рекомендую его, он заставил меня работать на TypeScript в VSCode, хотя есть еще несколько проблем, которые нужно решить, и вы должны не забыть перезапустить VS Code при установке расширения.
Я приобщаюсь к культуре программирования на JavaScript, которая меня заинтересовала после долгого времени, проведенного в странах C #, Objective-C и Swift. Мне просто нравится, как культура развивается в этом мире так быстро, в то время как в других языках она имеет тенденцию замедляться.
