Китайские шашки в TypeScript и WebPack[ОБНОВЛЕНО]
Привет, я просто хотел создать этот учебник, чтобы создать китайские шашки с помощью Typescript, а затем скомпилировать и минимизировать его с помощью веб-пакета.
Результирующий размер одного файла js, созданного в конце концов, не превышает 2 КБ, тогда как код, который мы напишем, будет больше 8 КБ.
Минификация на 75%!!
Проект не завершен, но уже загружен.
"Исходный код"
PS: Эта игра вдохновлена *Chain Reaction* для Android.
Маленькие шаги:
Давайте начнем. Для начала работы с этим учебным пособием вам потребуются следующие предварительные условия.
- Хороший редактор кода, такой как VS Code, Brackets, Atom и т. д.
- Базовые знания TypeScript (подойдет даже JavaScript!!)
typescript
,webpack
иhttp-server
установлены на вашем компьютере- Самое главное, непредвзято относиться к следующим методам
Давайте начнем:
Прежде всего, давайте установим некоторые зависимости, которые нам понадобятся в нашем проекте. Запустите следующую команду в своем терминале **
npm i -g typescript webpack http-server
- Если вы используете Ubuntu, Mac или какой-либо другой дистрибутив Linux, просто откройте терминал, в противном случае найдите папку
Node.js
и щелкните элемент спискаNode.js Command prompt
, если вы используете Windows. - PS: возможно, вам придется поставить
sudo
перед приведенной выше командой в Ubuntu, Mac или дистрибутиве Linux.
Давайте согреемся:
Прежде всего, мы создадим несколько вспомогательных функций, чтобы упростить кодирование. Например, мы объявим функцию $
в качестве замены для document.querySelector
, так как мы будем часто использовать ее, а написание document.queryselector
снова и снова будет БОЛЬШОЙ проблемой.
В корневом каталоге создайте файлы со следующей структурой:
источник -
- дом.ц
- main.ts
index.html
стили.css
В вашем dom.ts добавьте следующий код:
Как вы можете видеть выше, этот код состоит из нескольких компонентов:
- Комментарии, начинающиеся с
/**
, называютсяJSDOC
комментариями. Они не только способствуют удобочитаемости кода, но также помогают редактору кода узнать информацию о том, что следует дальше, которую он даже показывает вам. @param
сообщает редактору кода, что у него будет параметр определенного типа. В нашем случае мы объявляем, что приведенная ниже функция принимает параметрselector
типаstring
.- После комментариев реальная функция там. К нему прикреплен
export
. Этот синтаксисexport
сообщает компилятору Typescript, что эта функция будет использоваться и другими модулями. - Далее мы определяем функцию
$
. Обратите внимание, что здесь мы указали тип параметра. Это гарантирует, что в эту функцию может быть передана только строка, даже число, логическое значение, объект или массив. - То, что мы возвращаем, довольно легко понять. Мы возвращаем то же самое, что возвращает функция
document.querySelector
.
Теперь вместо того, чтобы использовать document.querySelector('selector')
каждый раз, вы можете согласиться на простую старую функцию $
.