Как получить минифицированные файлы в проекте (Gatsby / React)
версия gatsby = 2.0.0-beta.19
версия узла = v10.6.0
версия npm = 6.1.0
Версия VScode = 1.25.1
При добавлении минимизированных файлов (.min.js или .js с минимизированным содержимым) в мой проект React Gatsby я получаю следующую ошибку, когда пытаюсь выполнить gatsby develop:
ERROR Failed to compile with 1 errors 10:41:47 AM error in ./src/components/appinsights.js Module Error (from ./node_modules/eslint-loader/index.js): /mnt/d/my_site/src/components/appinsights.js 2:185 error Expected an assignment or function call and instead saw an expression no-unused-expressions 2:248 warning Unexpected use of comma operator no-sequences 2:493 warning Unexpected use of comma operator no-sequences 2:649 error Expected an assignment or function call and instead saw an expression no-unused-expressions 2:660 warning Unexpected use of comma operator no-sequences 2:761 warning Unexpected use of comma operator no-sequences 7:1 error Expected an assignment or function call and instead saw an expression no-unused-expressions 7:31 warning Unexpected use of comma operator no-sequences ✖ 8 problems (3 errors, 5 warnings)
Я добавил новый файл "./src/components/appinsights.js", и содержимое файла находится внутри тега сценария Фрагмент JS-кода App Insights
var appInsights=window.appInsights||function(a){
function b(a){c[a]=function(){var b=arguments;c.queue.push(function(){c[a].apply(c,b)})}}var c = {config:a},d=document,e=window;setTimeout(function(){var b=d.createElement("script");b.src=a.url||"https://az416426.vo.msecnd.net/scripts/a/ai.0.js",d.getElementsByTagName("script")[0].parentNode.appendChild(b)});try{c.cookie=d.cookie}catch(a){}c.queue=[];for(var f=["Event","Exception","Metric","PageView","Trace","Dependency"];f.length;)b("track"+f.pop());if (b("setAuthenticatedUserContext"),b("clearAuthenticatedUserContext"),b("startTrackEvent"),b("stopTrackEvent"),b("startTrackPage"),b("stopTrackPage"),b("flush"),!a.disableExceptionTracking){f = "onerror",b("_"+f);var g=e[f];e[f]=function(a,b,d,e,h){var i=g&&g(a,b,d,e,h);return!0!==i&&c["_"+f](a,b,d,e,h),i}}return c
}({
instrumentationKey: "<my_key>"
});
window.appInsights=appInsights,appInsights.queue&&0===appInsights.queue.length&&appInsights.trackPageView();
В моем "./src/components/layout.js"
import appinsightsFile from './appinsights.js'
...
<Helmet
title = {data.site.siteMetadata.title}>
<html lang = "en" />
<script type = "application/ld+json">{appinsightsFile}</script>
</Helmet>
...
Я не уверен, что это проблема реакции или Гэтсби. Кажется, я не могу получить минифицированный код для работы с моим приложением.
Я пытался:
- встроенный код аналитики приложения в моем layout.js
- извлечение тегов скрипта из кода шлема
Ответы 3
Я не настолько опытен и хотел бы это прокомментировать, но мне нужно 50 репутации. В любом случае, возможно, мы сможем решить вашу проблему вместе.
Во-первых, почему вы используете тип application/ld+json вместо text/javascript, как указано в файле readme ApplicationInsights-JS?
Для устранения этой проблемы попробуйте вставить содержимое appinsights.js непосредственно в тег скрипта.
Следующее должно работать:
<Helmet
title = {data.site.siteMetadata.title}>
<html lang = "en" />
<script type = "text/javascript">
{`SCRIPT`}
</script>
</Helmet>
Если нет, попробуйте вместо этого опасноSetInnerHTML.
Обратите внимание на обратные галочки внутри {}. Если это работает правильно, продолжайте работу с вашим компонентом.
Как я знаю - поправьте меня, если я ошибаюсь - вариант использования прямого импорта файла в Gatsby относится к статическим файлам. Вы можете просто import logo from './Logo.svg', и это вернет URL-адрес этого файла. За кулисами Webpack будет включать этот файл в пакет, и вы можете ссылаться на него, как в атрибутах src и href.
Если вы хотите включить эту строку JavaScript из компонента (то, что вы поместили в каталог components, не является компонентом), вы должны написать для этого компонент, который отображает этот JavaScript.
Я сам не пробовал, но думаю, что это может сработать с некоторыми изменениями.
Я думаю, что ошибки, с которыми вы сталкиваетесь, являются частью eslint. Компилятор (Webpack?) Ожидает неминифицированный JavaScript ES6. Опять же, поправьте меня, если я ошибаюсь.
Здесь вам может помочь какой-то функциональный компонент без сохранения состояния:
appinsights.js
import React from 'react'
const AppInsights = () => {
return `
SCRIPT
`
}
export default AppInsights
layout.js
import AppInsights from './appinsights.js' // Replace with your path.
<Helmet
title = {data.site.siteMetadata.title}>
<html lang = "en" />
<script type = "text/javascript"><AppInsights /></script>
</Helmet>
Но думаю, что с dangerouslySetInnerHTML по-прежнему безопаснее работать.
Если вы хотите взять минифицированный файл javascript и добавить его в тег <script в <head вашего сайта Gatsby, вам не нужно его import.
Проверьте документы по пользовательскому HTML.
Вы можете поместить файл в папку static/, тогда он будет скопирован в ваш встроенный вывод. Затем cp .cache/default-html.js src/html.js и отредактируйте src/html.js, чтобы добавить нужный тег <script.
Однако это не очень хороший подход. Вам лучше дать Гэтсби неминифицированный файл, если сможете. Затем вы можете импортировать его обычным способом Gatsby, и Gatsby выполнит его минимизацию. Гэтсби действительно хорошо разбирается в том, какой JavaScript и где требуется. Это одна из причин того, почему сайты Гэтсби такие безумно быстрые. Вы потеряете часть этого преимущества, если воспользуетесь описанным выше подходом.
https://www.gatsbyjs.org/docs/adding-images-fonts-files/
If you put a file into the static folder, it will not be processed by Webpack. Instead it will be copied into the public folder untouched.
Вы создаете папку как your_gatsby_project_folder/static (не в project/src) и помещаете в нее свой minified files извне. Все, что находится в статике, будет скопировано в общую папку, чтобы вы могли ссылаться на них как обычно.
// in your react file, you can use script tag to link to the minified files
render(){
return(
<div>
<script src = "/path/to/your/min.js" />
whatever
</div>
)
}
Мне не хватало обратных кавычек. Я не ожидал, что JS нужно рассматривать как литерал шаблона. Хотя я все еще не в восторге от решения и хотел бы вместо него включить необработанный минифицированный JS.