Китайские шашки в TypeScript и WebPack[ОБНОВЛЕНО]

Привет, я просто хотел создать этот учебник, чтобы создать китайские шашки с помощью Typescript, а затем скомпилировать и минимизировать его с помощью веб-пакета.

Результирующий размер одного файла js, созданного в конце концов, не превышает 2 КБ, тогда как код, который мы напишем, будет больше 8 КБ.

Минификация на 75%!!

Проект не завершен, но уже загружен.

Демо

"Исходный код"

PS: Эта игра вдохновлена ​​*Chain Reaction* для Android.

Маленькие шаги:

Давайте начнем. Для начала работы с этим учебным пособием вам потребуются следующие предварительные условия.

  1. Хороший редактор кода, такой как VS Code, Brackets, Atom и т. д.
  2. Базовые знания TypeScript (подойдет даже JavaScript!!)
  3. typescript, webpackи http-serverустановлены на вашем компьютере
  4. Самое главное, непредвзято относиться к следующим методам

Давайте начнем:

Прежде всего, давайте установим некоторые зависимости, которые нам понадобятся в нашем проекте. Запустите следующую команду в своем терминале **

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 добавьте следующий код:

Как вы можете видеть выше, этот код состоит из нескольких компонентов:

  1. Комментарии, начинающиеся с /**, называются JSDOC комментариями. Они не только способствуют удобочитаемости кода, но также помогают редактору кода узнать информацию о том, что следует дальше, которую он даже показывает вам.
  2. @param сообщает редактору кода, что у него будет параметр определенного типа. В нашем случае мы объявляем, что приведенная ниже функция принимает параметр selector типа string.
  3. После комментариев реальная функция там. К нему прикреплен export . Этот синтаксис export сообщает компилятору Typescript, что эта функция будет использоваться и другими модулями.
  4. Далее мы определяем функцию $. Обратите внимание, что здесь мы указали тип параметра. Это гарантирует, что в эту функцию может быть передана только строка, даже число, логическое значение, объект или массив.
  5. То, что мы возвращаем, довольно легко понять. Мы возвращаем то же самое, что возвращает функция document.querySelector.

Теперь вместо того, чтобы использовать document.querySelector('selector') каждый раз, вы можете согласиться на простую старую функцию $.