Question

作为回应，我在js文件中声明了一个const变量，并将其附加到index.html
在我的反应文件App.js中，如果我使用变量：

运行react-scripts开始/构建未定义'myVariable'no-undef
运行webpack和html可以正常工作

my example in codeSandbox（注意：codeSandbox示例也可以正常工作）

位于公用文件夹中的index.html（已添加config.js）

 <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <script src="config.js"></script>
  </body>

由webpack生成的dest文件夹中的index.html

<body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <script src="config.js"></script>
  <script type="text/javascript" src="main.js"></script>
</body>

config.js（声明为变量服务器）

const server = 'my server';

App.js（直接在react脚本中使用变量）

function App() {
  return (
    <div className="App">
      this is server: {server}
    </div>
  );
}

我想知道：

使用react-scripts start/build时是否可以解决编译错误？
通过使用webpack，如何检查这种不确定的变量问题？

其他问题：

如何使用webpack / webpack-dev-server检查no-unused-vars？
例如使用react-scripts start会收到警告：'myVariable' is assigned a value but never used

谢谢您的帮助！

Answer 1

您应该导出变量，然后将其导入App.js

export const server = 'server';

然后导入：

import {server} from '../public/config.js'

采用这种方法，就无需将config.js脚本导入到您的HTML文件中。

我看到您的项目中有自己的webpack.config.js文件，并且您还使用create-react-app创建了项目。 create-react-app使用名为react-script的软件包，其中包含自己的webpack配置文件。您可以在node-module\react-script\config中看到webpack配置。它将运行eslint，它负责您看到的警告。

您可以在文件的顶部添加App.js来禁用/* eslint-disable */上的eslint规则，并且指定文件上的错误将被忽略。

没有定义react-scripts变量，但webpack可以正常工作

1 个答案: