Проект TypeScript в Visual Studio Code. Устанавливаем: Node.js + Webpack (собираем все js файлы в один js) + Typescript (конвертация файлов ts в js)

Программирование, разработка, тестирование

→

Webpack - это САМЫЙ ПОПУЛЯРНЫЙ менеджер пакетов. Webpack добавляет JavaScript библиотеки в ваш проект

→

Проект TypeScript в Visual Studio Code. Устанавливаем: Node.js + Webpack (собираем все js файлы в один js) + Typescript (конвертация файлов ts в js)

Посмотрели 3176 раз(а)

последнее обновление: 3 августа 2020

Скачать пример

my_typescript_project2.zip ...
размер: 3 kb

D:/my_typescript_project2

index.html

package.json файл настройки Node.js (содержит названия пакетов)

tsconfig.json файл настройки TypeScript

webpack.config.js файл настройки Webpack (как объединять js файлы в один)

.vscode

launch.json файл настройки для Visual Studio Code (путь к запускаемому файлу)

src

book.ts

main.ts

build

transformed.js после запуска Webpack сгенерируется этот файл

Смотрим файлы >> ...

Файл index.html

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
     <meta charset="utf-8" />
     <title></title>
</head>

<body>

     
     <script src="./build/transformed.js" ></script>

     
     <script>
          // add books
          var lib = new MyBookLibrary();
          lib.AddBook("Hello");
          lib.AddBook("Good morning");

          // show books
          for (i=0; i<lib.books.length; i++)
          {
               var book = lib.books[i];
               alert(book.Name);
          }
     </script>

</body>

</html>

Файл package.json

{
     "name": "my_typescript_project2",
     "version": "1.0.0",
     "description": "",
     "main": "index.js",
     "scripts": {
          "MyBuild": "webpack"
     },
     "author": "",
     "license": "ISC",
     "devDependencies": {
          "typescript": "~5.6.0",
          "ts-loader": "^9.4.1",
          "webpack": "^5.74.0",
          "webpack-cli": "^4.10.0",
          "webpack-dev-server": "^4.11.1"
     },
     "dependencies": {}
}

Файл tsconfig.json

{
     "compilerOptions": {
          "module": "commonjs",
          "target": "es6",
          "lib": ["es6"],
          "sourceMap": true, // will be debug information(map file). You can use breakpoints in your application.
          "outDir": "./build"
     },
     "include": [
          "src/*.ts"
     ],
     "exclude": [
          "node_modules"
     ]
}

Файл webpack.config.js

const path = require('path');
const webpack = require('webpack');

module.exports = {
     entry: {
          'app': './src/main.ts'
     },
     mode: 'development', // in 'development' we can watch variable in debug
     devtool: "source-map", // that will generate debug information(map file). And you can debug application with breakpoints.
     output: {
          path: __dirname + '/build',
          filename: 'transformed.js',
          libraryTarget: 'var',
          library: 'MyBookLibrary'
     },
     resolve: {
          extensions: ['.ts', '.js']
     },
     module: {
          rules: [
               {
                    test: /\.ts$/,
                    loader: "ts-loader",
                    exclude: /node_modules/,
               }
          ]
     }
}

Файл .vscode/launch.json

{
     // Use IntelliSense to learn about possible attributes.
     // Hover to view descriptions of existing attributes.
     // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
     "version": "0.2.0",
     "configurations": [
          {
               "type": "chrome",
               "request": "launch",
               "name": "Launch Chrome",
               "url": "${workspaceFolder}/index.html"
          }
     ]
}

Файл src/book.ts

export class Book
{
     public Name: string;

     constructor()
     {
     }
}

Файл src/main.ts

import {Book} from './book';

class MyBookLibrary
{
     public books: Book[];

     constructor()
     {
          this.books = Array<Book>();
     }

     public AddBook(bookName: string)
     {
          var book = new Book();
          book.Name = bookName;
          this.books.push(book);
     }
}

module.exports = MyBookLibrary;

На заметку! Чтобы класс MyBookLibrary из файла main.ts мог использоваться в index.html нужно:

В файле webpack.config.js указать:

libraryTarget: 'var'
в опции libraryTarget указывается, что мы будем использовать для экспорта. 'var' означает что это переменная (то есть это класс или метод).
'var' это стандартное название для webpack.

library: 'MyBookLibrary'
в опции library указывается название класса или функции или название переменной.
Я указал название моего класса MyBookLibrary

в файле src/main.ts указать:

module.exports = MyBookLibrary;
то есть я указал мой класс MyBookLibrary

Как запустить пример?

Шаг 1.
Открываем
Visual Studio Code
и выбираем папку

В Visual Studio Code нажимаем на меню File → Open Folder
и выбираем папку D:/my_typescript_project2

Шаг 2.
Устанавливаем библиотеки

В Visual Studio Code нажимаем на меню Terminal → New Terminal
Выполним:

npm install

Смотрите картинку:

Объяснение:
В этом zip архиве нет js библиотек.
Название и версии js библиотек написаны в файле package.json.
При выполнении в командной строке npm install библиотеки с названием и версии из package.json скачаются из интернета и установятся в папку node_modules

Шаг 3.
Компилируем проект

Выполним:

npm run MyBuild

Смотрите картинку:

Объяснение:
Команда npm run MyBuild запускает скрипт MyBuild.
Скрипт MyBuild определен в файле package.json.
Файл D:/my_typescript_project2/package.json:
{
...
    "scripts": {
        "MyBuild": "webpack"
    }
...
}

Скрипт MyBuild запустит Webpack:
• Webpack запустит TypeScript.
• TypeScript сконвертирует наши файлы main.ts, book.ts в файлы main.js, book.js
• Webpack соберет файлы main.js, book.js в один файл transformed.js

Шаг 4.
Открываем страницу

В Visual Studio Code нажимаем на меню Run → Start Debugging

Смотрите картинку:

В браузере Google Chrome откроется страница с таким адресом: file:///D:/my_typescript_project2/index.html

Объяснение:
Запускается index.html
потому что файл настройки .vscode/launch.json

{
"version": "0.2.0",
"configurations": [
     {
          "type": "chrome",
          "request": "launch",
          "name": "Launch Chrome",
          "url": "${workspaceFolder}/index.html"
     }
]}

создержит
"url": "${workspaceFolder}/index.html"

Если вы сделали изменения в каком-нибудь файле

Если поменяли любой ts файл (main.ts или book.ts) или поменяли webpack.config.js то нужно:
1) перекомпилировать проект т.е. выполнить npm run MyBuild
2) запустить проект т.е. в Visual Studio Code нажимаем на меню Run → Start Debugging

Если вы помещяете свое приложениене на сервер то используйте опцию production

Если вы помещяете свое приложениене на сервер то желательно указать в файле webpack.config.js опцию 'production' чтобы все ts файлы получилились при конвертациии в js сжатыми.

Файл webpack.config.js

const path = require('path');
const webpack = require('webpack');

module.exports = {
     entry: {
          'app': './src/book.ts'
     },

     mode: 'production',
     ...
}

Помните!
При опции production отладка приложения не получится потому что, плохо отображаются названия переменных в debug и не везде ставятся breakpoints.

Просто для информации! Что нужно чтобы в проекте с Webpack и TypeScript работала debug информация ?

Чтобы при запуске приложения в Debug режиме (в меню Visual Studio Code нажимаем Run → Start Debugging) можно было поставить breakpoint или посмотреть значение переменной мы должны указать:

1) В файле tsconfig.json
"sourceMap": true

Файл tsconfig.json

{
     "compilerOptions": {
          ...
          "sourceMap": true, // will be debug information(map file). You can use breakpoints in your application.
          ...
     }
}

2) В файле webpack.config.js
mode: 'development'
devtool: 'source-map'

Файл webpack.config.js

const path = require('path');
const webpack = require('webpack');

module.exports = {
     ...
     mode: 'development', // in 'development' we can watch variable in debug
     devtool: 'source-map', // will be debug information(map file). You can use breakpoints in your application.
     ...
}

В результате мы увидим и breakpoint и значения переменных вот так:

← Предыдущая тема
Что такое Webpack ?

Следующая тема →
Проект React в Visual Studio Code. Устанавливаем: Node.js + Webpack (собираем все js файлы,библиотеки в один js) + Babel (расширенная js функциональность т.е. это jsx, классы) + React (пишем нашу компоненту)

Ваши Отзывы ... комментарии ...

Объявления

• Что такое Webpack ?

Проект TypeScript (node.js , webpack , typescript)

• Проект TypeScript в Visual Studio Code. Устанавливаем: Node.js + Webpack (собираем все js файлы в один js) + Typescript (конвертация файлов ts в js)

Проект React (node.js , webpack , babel , react)

• Проект React в Visual Studio Code. Устанавливаем: Node.js + Webpack (собираем все js файлы,библиотеки в один js) + Babel (расширенная js функциональность т.е. это jsx, классы) + React (пишем нашу компоненту)

Собираем js файлы в один js файл

• Собираем много js файлов в один js файл | Webpack, nodejs, expose-loader