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

Question

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”，文件内容来自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
从头盔代码中取出脚本标签

Answer 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'，这将 return 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 更安全。

Answer 2

如果您想获取缩小的 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 会处理它的缩小。 Gatsby 非常擅长找出 javascript 在哪里需要什么。这也是 Gatsby 网站速度如此之快的部分原因。如果您使用上述方法，您将失去一些优势。

Answer 3

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 从外部放入其中。 static 中的任何内容都将被复制到 public 文件夹中，因此您可以像往常一样 link 到它们

// 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>
  )
}

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

How to get minified files in project ( Gatsby / React )

minify

reactjs

azure-application-insights

gatsby