时间戳

首页 > 解决方案 > 如何在项目中获取缩小文件（Gatsby / React）

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

问题描述

盖茨比版本 = 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”，该文件的内容来自 AppInsights JS 片段的脚本标签

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

我不确定这是反应问题还是盖茨比。我似乎无法获得任何缩小的代码来处理我的应用程序。

我努力了：

标签： reactjsminifyazure-application-insightsgatsby

解决方案

我没有那么有经验，想对此发表评论，但我需要 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。

注意里面的倒勾{}。如果这工作正常，请继续使用您的组件。

据我所知——如果我出错了请纠正我——在 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

布局.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。

推荐阅读