some record
异步
node对象
1.global: 和window一样，任何global对象上的属性都可以被全局访问到。
2.process： 所有全局执行上下文中的内容都是在process对象中。浏览器中窗口的名字是window.name，在node中近程的名字是process.title
回调是一个简单的函数，会作为值被传给另一个函数，并且仅在事件发生时才被执行。 之所以这样做，是因为 JavaScript 具有顶级的函数，
这些函数可以被分配给变量并传给其他函数（称为高阶函数）
同时发两个请求， 可以用：
Promise.all([f1, f2])
.then(res => {
console.log(‘结果的数组’, res)
})
.catch(err => {
console.error(err)
})
在前面加上 await，然后调用的代码就会停止直到 promise 被解决或被拒绝（await即等，等上一个promise执行完再执行下一个）
这是一个 async/await 的简单示例，用于异步地运行函数：
const doSomethingAsync = () => {
return new Promise(resolve => {
setTimeout(() => resolve(‘做些事情’), 3000)
})
}
const doSomething = async () => {
console.log(await doSomethingAsync())
}
console.log(‘之前’)
doSomething()
console.log(‘之后’)
上面的代码会打印以下的内容到浏览器的控制台：
//之前
//之后
//做些事情 // 3 秒之后
在任何函数之前加上 async 关键字意味着该函数会返回 promise。
即使没有显式地这样做，它也会在内部使它返回 promise。
这就是为什么此代码有效的原因：
const aFunction = async () => {
return ‘测试’
}
aFunction().then(alert) // 这会 alert ‘测试’
这与以下代码一样：
const aFunction = () => {
return Promise.resolve(‘测试’)
} webpack://FillInTheBlankEditor/./src/editView.jsx?2bf1
aFunction().then(alert) // 这会 alert ‘测试’
SSR
“dev:build:client”: “webpack --config webpack.client.js --watch” //打包生产浏览器端代码
服务器端渲染事件绑定不会被渲染，所以要同构
服务器端路由： staticRouter
ssr只发生在第一次进入页面的时候，之后都由js接管了
git config --global --unset http.proxy
useEffect: 更改dom都属于副作用 两种常见副作用操作：需要清除的和不需要清除的。
effect 发生在“渲染之后”这种概念，不用再去考虑“挂载”还是“更新”。
React 保证了每次运行 effect 的同时，DOM 都已经更新完毕。
为什么要在 effect 中返回一个函数？ 这是 effect 可选的清除机制。
每个 effect 都可以返回一个清除函数。如此可以将添加和移除订阅的逻辑放在一起。它们都属于 effect 的一部分。
useEffect 可以在组件渲染后实现各种不同的副作用。有些副作用可能需要清除，所以需要返回一个函数：
// Redirect仅限于客户端重定向
Translation.loadData = (store) => {
// 负责在服务器端渲染之前，把这个路由需要的数据提前加载好
return store.dispatch(getTranslationList()) //派发action
// getHomeList是一个promise
}
Home.loadData = (store) => {
// 负责在服务器端渲染之前，把这个路由需要的数据提前加载好
return store.dispatch(getHomeList()) //派发action
// getHomeList是一个promise
}
componentWillMount () {
if (this.props.staticContext) {
this.props.staticContext.css.push(style._getCss())
}
}
webpack
ES2015 中的 import 和 export 语句已经被标准化。
虽然大多数浏览器还无法支持它们，但是 webpack 却能够提供开箱即用般的支持。
LOADER:
file-loader 将一个文件中的 import/require() 解析为 url，并且将文件发送到输出文件夹。
url-loader用于将文件转换为 base64 URI 的 loader。
url-loader 功能类似于 file-loader, 但是在文件大小（单位为字节）低于指定的限制时，
可以返回一个 DataURL。
图片可以用file-loader和url-loader来解析，file-loader单独生成图片文件并输出到output路径，
url-loader将图片转成base64的字符串放到bundle.js里，不生成单独图片。
可以设置limit防止图片过大造成页面加载过慢，
如果图片小于limit则生成base64字符串，否则直接生成图片。
css-loader 会对 @import 和 url() 进行处理，就像 js 解析 import/require() 一样
style-loader把 CSS 插入到 DOM 中
sass-loader加载 Sass/SCSS 文件并将他们编译为 CSS。
loader的执行顺序是从下到上，从右到左.
PLUGINS:
HtmlWebpackPlugin:该插件将为你生成一个 HTML5 文件， 在 body 中使用 script 标签引入你所有 webpack 生成的 bundle
webpack-dev-server:
babel: 将es6语法转换成es5语法
安装： npm i -D babel-loader @babel/core
babel-loader:只是打通babel和webpack
@babel/preset-env包含了es6转es5的规则
1）@babel/polyfill在低版本浏览器的补充， 使用import '@babel/polyfill’引入
按需加载规则： useBuiltIns: ‘usage’（用于解决业务代码的使用场景）
2）@babel/plugin-transform-runtime： 当使用第三方库时为了避免污染全局环境， 不导入polyfill
转而使用runtime.
可以把babel的相关内容放到.babelrc当中
@babel/preset-react用来解析react的jsx。
source-map: devtool: ‘cheap-module-eval-source-map’,
cheap:代码不包含列信息，只包含行信息。不包含loader里的代码，只针对业务代码