开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

读取javascript script index.html公共文件夹react js中的类

，可以通过以下步骤实现：

首先，确保你已经安装了React.js，并且已经创建了一个React项目。
在React项目的根目录下，你可以找到一个名为public的文件夹。这个文件夹是用来存放公共文件的，包括index.html。
打开public文件夹，你可以找到index.html文件。这个文件是React应用的入口文件。
在index.html文件中，你可以通过<script>标签来引入JavaScript文件。例如，如果你想引入一个名为script.js的JavaScript文件，可以在index.html中添加以下代码：

<script src="./script.js"></script>

这里的"./script.js"表示script.js文件与index.html文件在同一级目录下。如果script.js文件在其他目录下，可以根据实际情况修改路径。

在React中使用这个类，你需要在你的组件文件中引入这个类。假设你的组件文件名为MyComponent.js，可以在该文件中添加以下代码：

import React from 'react';
import MyClass from './script.js';

class MyComponent extends React.Component {
  // 在这里可以使用MyClass类
  // ...
}

export default MyComponent;

这里的"./script.js"表示script.js文件与MyComponent.js文件在同一级目录下。如果script.js文件在其他目录下，可以根据实际情况修改路径。

以上是读取javascript script index.html公共文件夹react js中的类的步骤。在实际应用中，你可以根据具体需求来调整路径和文件名。如果你需要更多关于React.js的学习资源，可以参考腾讯云的React.js产品文档：React.js产品文档。

相关搜索:如何从React中的cdn/script标签导入javascript包？动态读取项目文件夹中的类为什么我的script.js文件不能工作，但index.html文件中的JavaScript代码可以工作？nw.js:父文件夹中的index.html css背景图像中公共文件夹的React路径如何读取项目文件夹javascript中的文件？"WEBGL JAVASCRIPT MAPS“React中的聚类 react js中的活动类如何编译CRA公共文件夹中的JS文件？(Javascript)将Codepen中的变量从JS窗口传递到HTML <script></script>模板类中的react js异步函数如何使用Express从React中的公共文件夹下载文件在React.js中插入来自HTML <script>标记的按钮 NET核心类库读取项目文件夹中的文件我的html代码不能读取<script>标记中的js函数 Angularjs路由express.js“公共”文件夹中"views“文件夹中的静态文件无法将公用文件夹中的index.html与源文件夹中的index.js连接如何在create-react-app中使用公共文件夹中的脚本？从vue组件中的公共文件夹导入js文件(Laravel)为什么有些React应用需要index.html文件夹中的文件，以及如何更改？

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

React多页面应用4(webpack自动化生成多入口页面)

本教程总共7篇,每日更新一篇,请关注我们!你可以进入历史消息查看以往文章,也敬请期待我们的新文章! 1.React多页面应用1(webpack开发环境搭建,包括Babel、热更新等) ----2017.12.28 2.React多页面应用2(处理CSS及图片,引入postCSS及图片处理等)----2017.12.29 3.React多页面应用3(webpack性能提升,包括打包性能、提取公共包等)----2017.12.30 4.React多页面应用4(webpack自动化生成多入口页面)----201

05

(24/24) webpack小案例--自己动手用webpack构建一个React的开发环境

通过前面的学习，对webpack有了更深的认识，故此节我们就利用前面相关知识自己动手用webpack构建一个React的开发环境，就算是一个小案例吧。

02

React多页面应用5(webpack4 多页面自动化生成多入口文件)

本教程总共9篇,每日更新一篇,请关注我们!你可以进入历史消息查看以往文章,也敬请期待我们的新文章! 1、React多页面应用1(webpack4 开发环境搭建,包括热更新,api转发等)---2018.04.04 2、React多页面应用2(webpack4 处理CSS及图片,引入postCSS,及图片处理等)---2018.04.08 3、React多页面应用3(webpack4 多页面实现)---2018.04.09 4、React多页面应用4(webpack4 提取第三方包及公共组件)---2018

03

Webpack实战-管理多个单页应用

上一节3-9为单页应用生成HTML中只生成了一个 HTML 文件，但在实际应用中一个完整的系统不会把所有的功能都做到一个网页中，因为这会导致这个网页性能不佳。实际的做法是按照功能模块划分成多个单页应用，每个单页应用生成一个 HTML 文件。并且随着业务的发展更多的单页应用可能会逐渐被加入到项目中去。

01

Webpack实战-管理多个单页应用

本文主要讲解了如何利用Webpack构建一个单页应用程序，并通过代码示例讲解了如何配置Webpack和构建单页应用程序。同时，还介绍了如何使用AutoWebPlugin插件简化Webpack配置，以及利用插件生成单页应用程序的代码。

05

【译】开始学习React - 概览和演示教程

当我刚开始学习JavaScript的时候，我就听说了React，但我承认看了它一眼，它吓到我了。我看到了看起来一堆HTML和CSS的混合思想，这不是我们一直努力避免的事情吗？React有什么了不起的？

02

Webpack学习总结

WebPack : 模块化解决方案（模块打包机），能够分析项目结构，找到JavaScript模块及浏览器不能直接运行的拓展语言（Scss，TypeScript等），转换和打包为合适的格式供浏览器使用。WebPack把项目当做一个整体，通过一个给定的主文件（如：index.js）开始找到项目的所有依赖文件，使用loaders处理，最后打包为一个（或多个）浏览器可识别的JavaScript文件

06

使用Webpack来做自己的cra脚手架

现如今的JavaScript已经出了ES6,ES7甚至许多更高的版本，但是有很多浏览器是不支持这些新的语法，所以需要通过Babel 来将你的新语法编译成浏览器可以理解的旧语法。这是通过 Babel/core模块和babel/perset-env插件完成的。当然Babel还有其他的转换功能。

04

Webpack学习总结【原创】

Webpack学习总结 Write By CS逍遥剑仙我的主页: www.csxiaoyao.com GitHub: github.com/csxiaoyaojianxian Email: sunjianfeng@csxiaoyao.com QQ: 1724338257 目录导航 Webpack学习总结 1. Webpack 与 Gulp / Grunt 对比 2. 安装 2.1 创建package.json文件 2.2 安装Webpack作为依赖包

webpack的基础入门

现今的很多网页其实可以看做是功能丰富的应用，它们拥有着复杂的JavaScript代码和一大堆依赖包。为了简化开发的复杂度，前端社区涌现出了很多好的实践方法

02

转入门Webpack，看这篇就够了

2017年8月13日更新，本文依旧最新的webpack3.5.3将代码部分完全重写，所有代码都在Mac上正常运行过。希望依旧对你学习webpack有帮助。写在前面的话阅读本文之前，先看下面这个webpack的配置文件，如果每一项你都懂，那本文能带给你的收获也许就比较有限，你可以快速浏览或直接跳过；如果你和十天前的我一样，对很多选项存在着疑惑，那花一段时间慢慢阅读本文，你的疑惑一定一个一个都会消失；如果你以前没怎么接触过Webpack，而你又你对webpack感兴趣，那么动手跟着本文中那个贯穿始终

React Native 图表组件Echarts

近年来，随着移动端对数据可视化的要求越来越高，类似 MPAndroidChart 这样的传统图表库已经不能满足产品经理日益变态的需求。前端领域数据可视化的发展相对繁荣一些，通过 WebView 在移动端使用 Echarts 这样功能强大的前端数据可视化库，是解决问题的好办法。

02

React的安装和使用！

React库包含两部分：1、React包含了所有基本功能；2、ReactDOM只包含了操作DOM的功能。

03

Webpack学习笔记

Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其打包为合适的格式以供浏览器使用。 Webpack的工作方式是：把你的项目当做一个整体，通过一个给定的主文件（如：index.js），Webpack将从这个文件开始找到你的项目的所有依赖文件，使用loaders处理它们，最后打包为一个浏览器可识别的JavaScript文件。

02

微前端架构实战

之前比较多的处理方式是npm包形式抽离和引用，比如多个应用项目之间，可能有某业务逻辑模块或者其他是可复用的，便抽离出来以npm包的形式进行管理和使用。但这样却带来了以下几个问题：

00

基于create-react-app构建多页面应用框架

运行这些命令会在当前目录中创建一个名为 multiple-page 的目录。在该目录中，它将生成初始项目结构并安装依赖项，目录结构如下所示(tree -I "node_modules")：

ASP.NET Core 集成 React SPA 应用

AgileConfig的UI使用react重写快完成了。上次搞定了基于jwt的登录模式（AntDesign Pro + .NET Core 实现基于JWT的登录认证），但是还有点问题。现在使用react重写后，agileconfig成了个确确实实的前后端分离项目。那么其实部署的话要分2个站点部署，把前端build完的静态内容部署在一个网站，把server端也部署在一个站点。然后修改前端的baseURL让spa的api请求都指向server的网站。这样做也不是不行，但是这不符合AgileConfig的精神，那就是简单。asp.net core程序本身其实就是一个http服务器，所以完全可以把spa网站使用它来承载。这样只需要部署一个站点就可以同时跑spa跟后端server了。其实最简单的办法就是把build完的文件全部丢wwwroot文件夹下面。然后访问：

02

React多页面应用4(webpack4 提取第三方包及公共组件)

本教程总共9篇,每日更新一篇,请关注我们!你可以进入历史消息查看以往文章,也敬请期待我们的新文章! 1、React多页面应用1(webpack4 开发环境搭建,包括热更新,api转发等)---2018.04.04 2、React多页面应用2(webpack4 处理CSS及图片,引入postCSS,及图片处理等)---2018.04.08 3、React多页面应用3(webpack4 多页面实现)---2018.04.09 4、React多页面应用4(webpack4 提取第三方包及公共组件)---2018

05

React入门一：React简介及基本使用｜ 8月更文挑战

angular、React、vue就属于框架而jQuery、bootstrap就是库

02

webpack+es2015+react+Ant Design纲领

最近TWaver 3D机房项目打算使用Ant Design来重构后端管理页面，Ant Design 团队不是很熟悉，webpack react等用的不多，所以自己花了一天时间，把相关知识点撸了一遍，给团队做了个培训。下面主要是一个培训的纲领，整个流程可以通畅的跑下来；主要是webpack+es2015+react+Ant Design。当然，ant design 自己有一套框架打包平台，有兴趣的也可以研究。

03

React 脚手架项目打包时的路径问题

create-react-app 脚手架指令可以生成 React 项目，在项目完成之后执行打包命令 npm run build，文件夹内生成 build文件夹，就是打包后的文件，在浏览器运行 index.html 发现页面空白，打开控制台有报错，css 和 js 文件的引用路径有问题。

03

React 入门学习（五）-- 认识脚手架

在我们的现实生活中，脚手架最常用的使用场景是在工地，它是为了保证施工顺利的、方便的进行而搭建的，在工地上搭建的脚手架可以帮助工人们高校的去完成工作，同时在大楼建设完成后，拆除脚手架并不会有任何的影响。

02

React 入门学习（五）-- 认识脚手架

在我们的现实生活中，脚手架最常用的使用场景是在工地，它是为了保证施工顺利的、方便的进行而搭建的，在工地上搭建的脚手架可以帮助工人们高校的去完成工作，同时在大楼建设完成后，拆除脚手架并不会有任何的影响。

02

如何用 esbuild 替换 Create React App 中的 Webpack

原文链接：https://devtails.xyz/how-to-replace-webpack-in-create-react-app-with-esbuild[1]

02

webpack配置React开发环境(上)

Webpack 是一个前端资源加载/打包工具，我们部门的一条主要技术栈就是Webpack+React+ES6+node，虽然之前自己做个人项目也接触好多次Webpack，但是自己并没有研读总结过Web

使用 webpack 4 和 Babel 7 构建 React 应用及如何引入 Material Design

在过去的一年和一些人中，我一直在与 Creative Tim 合作。我一直在使用 create-react-app 来开发一些不错的产品。有很多客户询问如何在 Webpack 上迁移我们的产品模板。

06

webpack入门指南

1. 导语 github仓库 https://github.com/Rynxiao/webpack-test 1.1 什么叫做webpack webpack is a module bundler. webpack takes modules with dependencies and generates static assets representing those modules. 简单的概括就是：webpack是一个模块打包工具，处理模块之间的依赖同时生成对应模块的静态资源。 1.2 web

04

Next -24- 添加相册系列 -4- 将本地相册信息部署到hexo

在之前基础工作完成后，来到了距离我们相册最接近的一步，本文介绍上线相册的一种思路，供大家参考。准备工作 Next -21- 添加相册系列 - 1- 框架设置 Next -22- 添加相册系列 -2- 使用七牛云qshell同步图像目录 Next -23- 添加相册系列 -3- 获取图像信息、保存为json文件并上传图像上线思路现在我们已经有了基础的photos框架，图像文件夹已经整理完毕，提取了信息放在了json文件，并且将图像上传到了七牛云图床，在hexo source文件夹内创建了相册对应inde

02

react脚手架改造(react/react-router/redux/eslint/karam/immutable/es6/webpack/Redux DevTools)

公司突然组织需要重新搭建一个基于node的论坛系统，前端采用react，上网找了一些脚手架，或多或少不能满足自己的需求，最终在基于YeoMan的react脚手架generator-react-webpack上搭建改造，这里作为记录。代码在这里：github 另外推荐地址：react-starter-kit 简单文件夹结构 ├── README.md # 项目README文件 ├── conf # 配置文件夹

05

入门Webpack（上）

写在前面的话阅读本文之前，先看下面这个webpack的配置文件，如果每一项你都懂，那本文能带给你的收获也许就比较有限，你可以快速浏览或直接跳过；如果你和十天前的我一样，对很多选项存在着疑惑，那花一段时间慢慢阅读本文，你的疑惑一定一个一个都会消失；如果你以前没怎么接触过Webpack，而你又你对webpack感兴趣，那么动手跟着本文中那个贯穿始终的例子写一次，写完以后你会发现你已明明白白的走进了Webpack的大门。 //一个常见的Webpack配置文件var webpack = require('webp

09

面试官常问的那些webpack插件-超详细总结

模块热更新插件。Hot-Module-Replacement 的热更新是依赖于 webpack-dev-server，后者是在打包文件改变时更新打包文件或者 reload 刷新整个页面，HRM 是只更新修改的部分。

01

webpack 的核心概念和构建流程

一个单页应用需要配置一个entry指明执行入口，web-webpack-plugin里的WebPlugin可以自动的完成这些工作：webpack会为entry生成一个包含这个入口的所有依赖文件的chunk，但是还需要一个html来加载chunk生成的js，如果还提取出css需要HTML文件中引入提取的css。

02

18款Webpack插件，总会有你想要的！

这篇文章整理了18个Webpack插件，分享给Web开发的小伙伴。Plugin是一个扩展器，它丰富了webpack本身，针对的是loader结束后，webpack打包的整个过程，它并不直接操作文件，而是基于事件机制工作，会监听webpack打包过程中的某些分段，执行广泛的任务。

04

扩大Android攻击面：React Native Android应用程序分析

React Native是一款移动端应用程序框架，由于该框架允许开发人员使用React和原生平台功能，目前有很多Android和iOS应用程序都是基于该框架进行开发的。

03

快将你的 React 应用迁移到 Vite 吧，速度太快啦

大多数人使用 Create React App 来创建 React App。虽然它支持所有开箱即用的配置。但是，当你的项目代码增长时，你可能会面临更高的构建时间、开发服务器的启动速度变慢并等待 2 到 5 秒以反映您在代码中所做的更改，并且当应用程序大规模增长时，这可能会迅速增加。

02

学习 React Native for Android：React 基础

本文将从一个简单的例子开始，逐步深入 React 的编写细节。 React Native 主张用 React 的开发思维来编写 UI 层。因此在学习 React-Native 之前，了解基本的 React 的语法和存在的坑会对今后 React Native 的开发大有裨益。本文将从一个简单的例子开始，逐步完善我们的程序。在这个过程中，我们将一步步探讨如何用 React 来开发网页应用，以及需要注意的陷阱。与其他教程不同，本文将采用类似 Zed A. Shaw 的《Learn Code the Hard

02

抛开vue-cli，一步步搭建vue+webpack环境

敲代码没有高亮简直蛋疼，简单带过下 sublime打开 —→ 点击Preferences下的Package Control —→ 输入install package回车过一会儿 —→ 再输入vue syntax highlight回车，安装完毕 —→ 点击sublime选择vue component，即高亮

01

Vite 原理浅析及应用

Tips: 如果大家想直接看重点可以跳过前言，这里将介绍一下为什么我会有这次分享，也就是本次分享的背景以及目的。

04

react打包优化【第三方库使用cdn】

对于 react、react-router、redux、axios和antd等等这些不经常改动的库、我们让webpack不对他们进行打包，通过cdn引入，可以减少代码的大小、也可以减少服务器的带宽，网站首次加载会更快。

03

使用Yarn workspace,TypeScript,esbuild,React和Express构建 K8S 云原生应用(一)

本文将指导您使用 K8S ，Docker，Yarn workspace ，TypeScript，esbuild，Express 和 React 来设置构建一个基本的云原生 Web 应用程序。在本教程的最后，您将拥有一个可完全构建和部署在 K8S 上的 Web 应用程序。

03

搞清楚怎样基于 Webpack5 从 0 搭建 React开发环境-超详细

出处 @刘江，原文地址 https://juejin.cn/post/6929496472232656909

02

React多页面应用3(webpack性能提升,包括打包性能、提取公共包等)

本教程总共7篇,每日更新一篇,请关注我们!你可以进入历史消息查看以往文章,也敬请期待我们的新文章! 1.React多页面应用1(webpack开发环境搭建,包括Babel、热更新等) ----2017.12.28 2.React多页面应用2(处理CSS及图片,引入postCSS及图片处理等)----2017.12.29 3.React多页面应用3(webpack性能提升,包括打包性能、提取公共包等)----2017.12.30 4.React多页面应用4(webpack自动化生成多入口页面)----201

08

借助Babel 7和Webpack构建React Toolchain

React不是完全开箱即用的。它使用了一些最近node才支持的关键字和语法（在本教程中我使用了v 9.3.0版本）。因此需要一些很麻烦的设置，但是Facebook为此提供了一个可以轻松创建React应用的方案。这听起来不错，那我为什么要说这一点呢？

04

JavaScript 新一代构建工具对比

本文译自：https://css-tricks.com/comparing-the-new-generation-of-build-tools/

01

使用 esbuild 来打包一个 React 库

esbuild 的大名相信大家也有耳闻，它是一个非常快的 Javascript 打包工具，用 GO 语言编写，是 figma 的 cto Evan Wallace 著作的，一个 30 min 的 webpack 项目用 esbuild 可以分钟级运行。本文将记录使用 esbuild 来打包一个 React 库。

02

使用 esbuild 来打包一个 React 库

esbuild 的大名相信大家也有耳闻，它是一个非常快的 Javascript 打包工具，用 GO 语言编写，是 figma 的 cto Evan Wallace 著作的，一个 30 min 的 webpack 项目用 esbuild 可以分钟级运行。本文将记录使用 esbuild 来打包一个 React 库。

02

webpack基本打包配置流程

项目搭建以及webpack打包配置流程创建文件夹EC（文件夹和文件名根据需求自定义）在EC文件夹下新建文件夹APP 在APP文件夹下新建入口文件index.js 和运行该入口文件的index.html文件在APP文件夹下新建两个js文件：a,js b.js （当项目级别如react项目，可以根据需求创建components文件夹等等，用于更好地管理模块化项目） APP/index.html <!DOCTYPE html> <html> <head> <meta charse

09

[翻译]Ext JS 教程-开始使用 ExtJS 4

入门

1. 需求

1.1 网页浏览器

ExtJS 4 支持所有主流的浏览器，从IE 6 到最新的谷歌Chrome。在开发期间，我们建议你使用下面这些浏览器，以获得更好的调试体验。

Ø Google Chrome 10+

Ø Apple Safari 5+

Ø Mozilla Firefox 4+ 带Firebug Web 开发插件

本教程假设你正在使用最新的谷歌 Chrome 浏览器。如果你还没有 Chrome，花点时间去下载它吧，然后去熟悉熟悉 Chrome 的开发者工具。

1.2 Web 服务器

尽管使用 ExtJS 4 并不一定需要一个本地的web 服务器，仍然强烈建议你在开发的时候能有一个，因为 XHR 在大多数浏览器上有针对本地 file:// 的cross origin 限制。如果你还没有本地的web 服务器，建议你下载并安装 Apache HTTP Server。

Ø 了解在 Windows 上面安装 Apache

Ø 了解在 Linux 上面安装 Apache

Ø Mac OS X 已经内置了apache，你可以在 System Preference > Sharing 下面的 Web Sharing 旁找到

一旦你安装好了 Apache ，你可以通过在浏览器地址栏输入 localhost 验证它是否在运行。你会看到一个表示 Apache HTTP 服务器已经成功安装并且正常运行的开始页面。

1.3 Ext JS 4 SDK

下载 Ext JS 4 SDK，把压缩包解压到一个在你的web 根路径下新建的extjs文件夹。如果你不知道web根目录在哪儿，查阅你web服务器的相关文档。Web 根路径的位置根据你操作系统的不同而有所不同，但是如果你使用的是 Apache，你一般会在：

Ø Windows - "C:\Program Files\Apache Software Foundation\Apache2.2\htdocs"

Ø Linux - "/var/www/"

Ø Mac OS X - "/Library/WebServer/Documents/"

一旦你已经完成安装，将浏览器导航至 http://localhost/extjs/index.html 。如果一个 ExtJS 4 的欢迎页面出现了，代表你已经一切就绪了。

2. 应用程序结构

2.1 基本结构

如下所列的建议尽管不是强制的，但是可以作为最佳实践指南考虑，以保持你的应用的结构条理性、可扩展性和可维护性。下面是推荐的Ext JS 应用程序结构：

- appname

- app

- namespace

- Class1.js

- Class2.js

- ...

- extjs

- resources

- css

- images

- ...

- app.js
04

IdentityServer（13）- 添加JavaScript客户端

这个快速入门将展示如何构建一个JavaScript客户端应用程序。用户将登录到IdentityServer，使用IdentityServer发出的访问令牌调用Web API，并注销IdentityS

04

【Parcel 2 + Vue 3】从0到1搭建一款极快，零配置的Vue3项目构建工具

一周时间，没见了，大家有没有想我啊！哈哈！我知道肯定会有的。言归正传，我们切入正题。上一篇文章中我主要介绍了使用Vite2+Vue3+Ts如何更快的入手项目。那么，今天我将会带领大家认识一个新的Vue3项目构建工具——parcel-vue-cli。这是什么？怎么以前没有听说过。有这样的疑问其实并不奇怪，因为这个构建工具是我自己开发的。你可能会这样问：“你自己开发的？这么厉害吗”？是的，豆哥其实就这么厉害。开玩笑啦！其实没有你想得那么厉害。都是搬砖人，主要看思路。好，不扯了！本篇文章我将带大家如何从0到1开发一款极快，零配置的Vue3项目构建工具（parcel-vue-cli）。名字就这么记着吧！

03

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭