Когда вы работаете над проектом на основе 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.