Чтобы сформировать приложение с помощью одной команды, используйте мой npm (https://www.npmjs.com/package/create-component-ui) или создайте его с нуля, продолжайте читать.
- Создайте каталог для своего приложения и перейдите в него.
mkdir app
cd app2. Запустите npm init, чтобы инициализировать файл package.json.
npm init3. Установите webpack, webpack-dev-server, загрузчики и плагины, запустив
npm install --save-dev webpack webpack-cli webpack-dev-server css-loader file-loader sass-loader style-loader ts-loader url-loader html-webpack-plugin clean-webpack-plugin copy-webpack-plugin4. Добавьте следующие скрипты в package.json.
"scripts": {
"build": "webpack --mode production",
"watch": "webpack --watch",
"start": "webpack-dev-server --open",
"test": "echo \"Error: no test specified\" && exit 1"
}
5. Установите typescript.
npm install --save-dev typescript
6. Установите полифилл веб-компоненты для совместимости с браузером.
npm install --save-dev @webcomponents/webcomponentsjs
7. Установите lit-element.
npm install --save lit-element
8. Добавьте webpack.config.js со следующей конфигурацией.
9. Добавьте tsconfig.json.
10. Создайте каталог src в каталоге app.
11. Создайте index.html в каталоге src со следующим содержанием.
12. Создайте файл hello-world-elem.ts в каталоге src и добавьте следующий контент в hello-world-elem.ts.
13. Создайте файл index.ts внутри src и импортируйте hello-world-elem как
14. Структура каталогов вашего приложения должна выглядеть следующим образом
Компиляция и запуск
- Чтобы скомпилировать и наблюдать за изменениями кода, выполните следующую команду в каталоге app
npm run watch
2. Чтобы запустить webpack-dev-server, выполните следующую команду в каталоге app.
npm start
3. Оно должно автоматически открывать наше приложение в браузере со следующим содержанием
4. Чтобы минимизировать и создать готовую сборку в каталоге dist, выполните следующую команду в каталоге app.
npm run build
