构建后编辑文件,React
Edit Files After Build, React
我使用 create-react-app 在 React 中构建了一个应用程序。只需 JavaScript、CSS、HTML 和 React。我 运行 npm build
然后将应用程序部署到 Netlify。
我想回去编辑一些 CSS。因此,我从笔记本电脑 cd
进入目录并在 localhost:5000 上部署。我打开 VS Code 并进行更改,但是 none 的更改反映在浏览器中 @ localhost:5000。
当我构建应用程序时,我的设置方式允许我在保存文件时立即在浏览器中查看每个更改。
在 运行 npm build
之后可以编辑文件吗?我在这里错过了什么?
当您 运行 在 React 应用程序(或任何其他应用程序)上构建代码时,代码将从 es6 转换为 es5,然后可能会缩小(取决于 webpack 配置),因此代码无法访问,您需要 .将文件映射到生产环境中的调试代码。
因此,对已部署代码采取行动的最干净的方法是使用更新的功能进行新构建,然后再次部署前端。
在本地开发中,React 样板文件通常大量使用热重载,这是一个允许在应用 运行ning 时热替换代码的插件。
构建的应用程序改为加载 JS 文件块一次并将其缓存。因此,为了查看您的更改,您必须清理缓存或强制刷新(windows 上的 home+F5,OSX 上的 CMD+R)以确保您的更改可见。
尽管如此,我不鼓励编辑构建文件。当您必须更新代码时,请保持开发模式,在部署之前,构建您的代码并进行实时测试。
您可以在 src 文件夹外创建一些文件并使用 fecth 从 app.js 访问它们,甚至从 index.html 导入它们...所以如果您想更改某些内容,您可以在没有必须重新构建。
我使用 create-react-app 在 React 中构建了一个应用程序。只需 JavaScript、CSS、HTML 和 React。我 运行 npm build
然后将应用程序部署到 Netlify。
我想回去编辑一些 CSS。因此,我从笔记本电脑 cd
进入目录并在 localhost:5000 上部署。我打开 VS Code 并进行更改,但是 none 的更改反映在浏览器中 @ localhost:5000。
当我构建应用程序时,我的设置方式允许我在保存文件时立即在浏览器中查看每个更改。
在 运行 npm build
之后可以编辑文件吗?我在这里错过了什么?
当您 运行 在 React 应用程序(或任何其他应用程序)上构建代码时,代码将从 es6 转换为 es5,然后可能会缩小(取决于 webpack 配置),因此代码无法访问,您需要 .将文件映射到生产环境中的调试代码。 因此,对已部署代码采取行动的最干净的方法是使用更新的功能进行新构建,然后再次部署前端。 在本地开发中,React 样板文件通常大量使用热重载,这是一个允许在应用 运行ning 时热替换代码的插件。 构建的应用程序改为加载 JS 文件块一次并将其缓存。因此,为了查看您的更改,您必须清理缓存或强制刷新(windows 上的 home+F5,OSX 上的 CMD+R)以确保您的更改可见。 尽管如此,我不鼓励编辑构建文件。当您必须更新代码时,请保持开发模式,在部署之前,构建您的代码并进行实时测试。
您可以在 src 文件夹外创建一些文件并使用 fecth 从 app.js 访问它们,甚至从 index.html 导入它们...所以如果您想更改某些内容,您可以在没有必须重新构建。