Когда вы работаете над проектом на основе Ionic или любым веб-проектом, имеющим файл JavaScript или CSS, иногда вы забываете добавить свой новый файл JavaScript или CSS на страницу. Это часто приводит к битой странице. Вы потратите много времени на устранение проблемы, прежде чем поймете, что просто забыли добавить скрипт или тег CSS. В этом посте мы увидим быстрые и простые шаги по включению пользовательских файлов CSS и JS в Ionic 3. Это сэкономит ваше время и усилия по исправлению страницы.

Возьмем, к примеру, контекст: при работе с внешними библиотеками и пакетами NPM вам иногда нужно загружать файлы JS/CSS способом, отличным от того, как уже загружена остальная часть вашего пакета.

Например, если вы используете ng2-CKEditor, вам нужно сослаться на файл ckeditor.js в вашем файле index.html:

‹script src="https://cdn.ckeditor.com/4.5.11/full/ckeditor.js›‹/script›

Ссылка: https://www.npmjs.com/package/ng2-ckeditor

Вы можете видеть, что ссылка выше будет загружена с сервера cdn.ckeditor.com. Следующие шаги объясняют, насколько легко мы можем загрузить внешний файл JS/CSS из вашего приложения.

Установить зависимости

Вам нужно начать с установки пакета NPM в ваше приложение Ionic. В этом случае я использовал пакет ng2-CKEditor, чтобы легко добавить форматированное текстовое поле в свое приложение:

npm установить ng2-ckeditor

Это установит зависимости ng2-ckeditor, кроме ckeditor.js, в вашу папку node_modules.

Создать пользовательскую конфигурацию копирования

Файл copy.config.js — это пользовательский словарь, который упрощает расширение/переопределение сборки ionic.

В Ionic есть файл copy.config.js по умолчанию в пути @ionic/app-scripts/config. Проверьте следующий код:

module.exports = {
copyAssets: {
src: ['{{SRC}}/assets/**/*'],
место назначения: '{{WWW}}/assets'
},
copyIndexContent: {
источник: ['{{SRC}}/index.html', '{{SRC}}/manifest.json', '{{SRC}} /service-worker.js'],
dest: '{{WWW}}'
},
copyFonts: {
src: ['{{ROOT}}/node_modules /ionicons/dist/fonts/**/*', '{{ROOT}}/node_modules/ionic-angular/fonts/**/*'],
dest: '{{WWW}}/assets/ шрифты'
},
copyPolyfills: {
src: [`{{ROOT}}/node_modules/ionic-angular/polyfills/${process.env.IONIC_POLYFILL_FILE_NAME}`],
dest: '{{BUILD}}'
},
copySwToolbox: {
src: ['{{ROOT}}/node_modules/sw-toolbox/sw-toolbox.js' ],
место назначения: '{{СТРОЙКА}}'
}
}

Код copy.config.js по умолчанию будет выглядеть так, как показано выше. Здесь copyAssets, copyIndexContent и т. д. обозначают имя записи. Здесь мы можем указать любое имя.

  • src — это путь к файлу, в котором вы сохраняете файл CSS/JS.
  • dest – место назначения, куда нужно отправить файл. В идеале это будет ваша папка сборки.

Затем эта конфигурация позаботится о копировании вашего файла CSS/JS в папку сборки, точно так же, как копируется ваш сервис-воркер или активы. Мы начинаем с добавления записи в наш package.json, которая передает пользовательскую конфигурацию в хук ionic_copy:

"config": { "ionic_copy": "./config/copy.config.js" }

Теперь вам нужно пойти дальше и создать этот файл. Создайте папку config в корне вашего проекта и назовите файл внутри, как показано ниже: copy.config.js.

На следующем шаге вам нужно отредактировать только что созданный файл copy.config.js. Скопируйте все содержимое файла copy.config.js по умолчанию и вставьте его в только что созданный файл.

Теперь вы можете добавить свой собственный JS/CSS в новый файл copy.config.js, как показано ниже. Здесь я добавил файлы зависимостей для ng2-ckeditor в свой собственный файл copy.config.

copyCkEditorScript: { src: ['{{ROOT}}/src/script/ckeditor.js'], dest: '{{BUILD}}' }, copyCkEditorConfigScript: { src: ['{{ROOT}}/src/script/config.js'], dest: '{{BUILD}}' }, copyCkEditorEnScript: { src: ['{{ROOT}}/src/script/en.js'], dest: '{{BUILD}}/lang' }, copyCkEditorStyleScript: { src: ['{{ROOT}}/src/script/styles.js'], dest: '{{BUILD}}' }, copyCkEditorCss: { src: ['{{ROOT}}/src/style/editor.css'], dest: '{{BUILD}}/skins/moono' }

Следующим шагом будет добавление всех файлов зависимостей в папку сценариев и стилей.

В приведенном выше коде вы можете видеть, что copyCkEditorScript используется для загрузки ckeditor.js из src/script в мою папку сборки.

Загрузите в свое приложение

Мы установили пакет. Все файлы в файле copy.config.js будут скопированы в папку сборки. Нам просто нужно подключиться к нему и использовать его!

Чтобы сделать этот последний шаг, откройте свой src/index.html и где-нибудь внутри заголовка (для CSS/JS) добавьте запись, подобную этой:

‹script src="build/ckeditor.js"›‹/script›

Всегда помните, что файл был скопирован непосредственно в папку сборки, и это место, где наше приложение найдет его во время выполнения.

Вывод

В заключение, с небольшим количеством кода, вы можете включить все пользовательские файлы CSS и JS в свой проект Ionic, выполнив описанные выше шаги. Это экономит значительное количество времени, которое вы тратите на исправление неработающей страницы. Попробуйте выполнить эти шаги и сообщите нам, как это сработало для вас. Мы также хотели бы услышать от вас альтернативные обходные пути и советы по кодированию. Прокомментируйте этот пост.

Zerone разрабатывает индивидуальные программные решения, тщательно адаптированные к потребностям наших клиентов. Свяжитесь с экспертом сегодня.

Первоначально опубликовано на https://www.zerone-consulting.com.