如何在项目中获取缩小文件（Gatsby / React）答案

【问题标题】：How to get minified files in project ( Gatsby / React )如何在项目中获取缩小文件（Gatsby / React）
【发布时间】：2018-07-30 19:11:57
【问题描述】：

gatsby 版本 = 2.0.0-beta.19

节点版本 = v10.6.0

npm 版本 = 6.1.0

VScode 版本 = 1.25.1

在我的 react Gatsby 项目中添加缩小文件（.min.js 或具有缩小内容的 .js）时，当我尝试执行 gatsby develop 时出现以下错误：

错误 10:41:47 AM 编译失败，出现 1 个错误 ./src/components/appinsights.js 中的错误模块错误（来自 ./node_modules/eslint-loader/index.js）： /mnt/d/my_site/src/components/appinsights.js 2:185 错误应为赋值或函数调用，而是看到一个表达式 no-unused-expressions 2:248 警告意外使用逗号运算符无序列 2:493 警告意外使用逗号运算符无序列 2:649 错误应为赋值或函数调用，而是看到一个表达式 no-unused-expressions 2:660 警告意外使用逗号运算符无序列 2:761 警告意外使用逗号运算符无序列 7:1 错误应为赋值或函数调用，但看到一个表达式 no-unused-expressions 7:31 警告意外使用逗号运算符无序列 ✖ 8 个问题（3 个错误，5 个警告）

我添加了一个新文件“./src/components/appinsights.js”，该文件的内容来自App insights JS snippet的脚本标签内

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>
...

我不确定这是反应问题还是 Gatsby。我似乎无法获得任何用于我的应用程序的缩小代码。

我试过了：

在我的 layout.js 中内嵌应用洞察代码
从头盔代码中取出脚本标签

【问题讨论】：

标签： reactjs minify azure-application-insights gatsby

【解决方案1】：

我不是很有经验，想对此发表评论，但我需要 50 声望。无论如何，也许我们可以一起解决您的问题。

首先，您为什么使用类型 application/ld+json 而不是 ApplicationInsights-JS 自述文件中所述的 text/javascript？

要调试此问题，请尝试将appinsights.js 的内容直接插入到脚本标签中。

以下应该有效：

<Helmet
    title={data.site.siteMetadata.title}>
    <html lang="en" />
    <script type="text/javascript">
      {`SCRIPT`}
    </script>
</Helmet>

如果没有，请改用dangerouslySetInnerHTML。

注意{} 中的反引号。如果这工作正常，请继续使用您的组件。

As I know - 如果我出错了请纠正我 - 在 Gatsby 中直接导入文件的用例属于静态文件。您可以简单地 import logo from './Logo.svg' ，这会将 URL 返回到该文件。在后台，Webpack 会将该文件包含在包中，您可以像在 src 和 href 属性中一样引用它。

如果你想从一个组件中包含那个 JavaScript 字符串（你放在 components 目录中的不是一个组件），你应该为此编写一个组件来呈现这个 JavaScript。

我自己没有尝试过，但我认为这可以通过一些修改来实现。

我认为您面临的错误是eslint 的一部分。编译器（Webpack？）需要非缩小的 ES6 JavaScript。再次，如果我错了，请纠正我。

某种无状态的功能组件应该可以帮助您：

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 会更安全。

【讨论】：

反引号是我所缺少的。我没想到 JS 需要被视为模板文字。不过，我仍然对这个解决方案不感兴趣，而是希望包含原始的缩小 JS。

【解决方案2】：

https://www.gatsbyjs.org/docs/adding-images-fonts-files/

如果你把一个文件放到静态文件夹中，它不会被 Webpack 处理。相反，它将被原封不动地复制到公用文件夹中。

您创建一个文件夹为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>
  )
}

【讨论】：

【解决方案3】：

如果您想获取一个缩小的 javascript 文件并将其添加到 Gatsby 网站的 <head 中的 <script 标记中，您不想 import 它。

检查docs on custom html。

您可以将文件放入static/ 文件夹，然后它将被复制到您的构建输出中。然后cp .cache/default-html.js src/html.js 和编辑src/html.js 添加你想要的<script 标签。

但是，这不是一个很好的方法。如果可以的话，你最好把未缩小的文件给盖茨比。然后你可以用正常的 Gatsby 方式导入它，Gatsby 会处理它的缩小。 Gatsby 非常擅长弄清楚在哪里需要什么 javascript。这也是 Gatsby 网站速度如此之快的部分原因。如果您使用上述方法，您将失去一些优势。

【讨论】：