生产模式构建静态网页时,默认会生成 .map 文件,比较大,并且部署后通过浏览器访问可以在控制台看到开发时的源代码,虽说是方便调试,但是都构建 Production Build 了还能被查看代码总让人心里不太舒服。
配置
可以通过配置 .env 文件,将 GENERATE_SOURCEMAP 设为 false 即可不生成 sourcemap 文件。
创建 .env
文件,并在文件中添加这行代码
GENERATE_SOURCEMAP = false
生产模式构建静态网页时,默认会生成 .map 文件,比较大,并且部署后通过浏览器访问可以在控制台看到开发时的源代码,虽说是方便调试,但是都构建 Production Build 了还能被查看代码总让人心里不太舒服。
可以通过配置 .env 文件,将 GENERATE_SOURCEMAP 设为 false 即可不生成 sourcemap 文件。
创建 .env
文件,并在文件中添加这行代码
GENERATE_SOURCEMAP = false
非常简单的路由拦截,使用localstorage储存登录状态,写一个拦截组件,由他根据登录状态来判断是否跳转到登录。
一个很常见的需求:有些路由,需要登录才能访问,不登陆的情况下访问它就跳转到登录页面。这里就用 Context 来写个路由鉴权的小例子。
react-router v6稳定版出来了,有许多改变,以前拦截路由的方式也用不成了。在世界之外遨游了好久终于找到了一篇文章,学废了!整理学习一下分享出来。
安装react-router-dom的时候版本已经变成6.0.2了,没注意到,结果在写项目时候怪怪的,以往的写法都不对了,照着仓库的例子学了学发现跳转时闪屏。
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import {HashRouter,Route, Routes } from 'react-router-dom';
import User from './pages/User/User';
import Main from './pages/Main/Main'
ReactDOM.render(
<React.StrictMode>
<HashRouter>
<Routes>
<Route path="/" element={<App />}>
<Route path="user" element={<User />}/>
<Route path="*" element={<Main />}/>
</Route>
</Routes>
</HashRouter>
</React.StrictMode>,
document.getElementById('root')
);
官方仓库的教程只写了 <Router></Router>
,虽然比#号看起来舒服,但是一跳转就闪。
使用 <HashRouter></HashRouter>
就不闪屏了。
bind() 方法创建一个新的函数,在 bind() 被调用时,这个新函数的 this 被指定为 bind() 的第一个参数,而其余参数将作为新函数的参数,供调用时使用。
先引入一个例子:
const module = {
x: 42,
getX: function() {
return this.x;
}
};
let unboundGetX = module.getX;
console.log(unboundGetX()); // 该函数在全局范围内被调用
// 输出: undefined
unboundGetX = unboundGetX.bind(module);
console.log(unboundGetX());
// 输出: 42