webpack-dev-server filename中的路径问题，IntelliJ IDEA local history有效期设置，标签顺序设置，dva call put 解构

好久没有创作了！没有动力，思想触碰不到火花

        output: {
            path: path.join(__dirname, "../dist"),
            filename: "/js/[chunkhash].js",
            chunkFilename: '/js/[name].[chunkhash:5].chunk.js',
            libraryTarget: "umd"
        }

 filename属性，/js根路径下js

contentBase默认路径是项目根路径，当webpack-dev-server会首先在contentBase指定的虚拟目录下面引用资源，如果找不到，然后去磁盘目录path下面去引用资源。

浏览器访问的完整路径既webpack-dev-server将项目文件输出到内存中的路径：webpack-dev-server(contentBase指定了服务器资源的根目录)/webpack(path) + publicPath + filename

 

由于之前使用eclipse的习惯，在当前A页面按住ctrl跳转到另一个java文件(B页面)，再关闭B页面就会回到A页面。

但是idea默认的不是这样的，默认的总是关闭页面之后打开该页面相邻的左侧界面，下面就来描述怎么修改。

方法很简单：

File -> Settings -> Editor -> General -> Editor Tabs ：

JavaScript call() 方法

call() 方法是预定义的 JavaScript 方法。

它可以用来调用所有者对象作为参数的方法。

通过 call()，您能够使用属于另一个对象的方法。

最近在用dva做react-native的项目，在有些generator中用到了yield call()和 yield put()这两个方法。这里的call和put方法应该是从dva/effects中引入的。不明天这两个方法是怎么用的，也没有查到相关文档。求大手给解释下，不胜感激！！

https://dvajs.com/guide/introduce-class.html#reducer

简单理解 'redux-saga/effects' 中的几个关键字：fork，call， put，takeEvery，takeLatest，all

import { call, takeEvery, put, fork } from 'redux-saga/effects';

function* fetch_todo() {
  const todos = yield call(axios.get, 'https://jsonplaceholder.typicode.com/todos'); // axios.get('https://jsonplaceholder.typicode.com/users')      
  console.log(todos);
}

dva 负责处理异步的是封装后的 redux-saga 模块。也就是说，需要使用 call 方法。所以 dva 的请求数据套路是这样的：

  effects: {
    *getData(action, { call, put }) { // 第一个参数是 dispatch 所发出的 action，第二个参数是 dva 封装的 saga 函数。可以直接用 es 6 的解构风格拿取所需要的具体函数。
      const temp = yield call(userService.getUserData, {}); // 因为现在没有参数
      console.log('temp', temp); // 纯函数中不应有副作用（把数据转移到控制台也算副作用），这里只是方便在 chrome 里查看，
    }
  },

写完了？并没有。

赞美太阳...呸！dispatch！

我眼中 dva 里 dispatch-atcion 与 model/effect 的原理有点像 Android 四大组件之一的广播：

1. 通过 dispatch 函数发出一个包含 type 属性（此为必须）的 action。
2. dva 监听到 action 后会根据 action 的 type 值寻找对应 model 的 effect 的方法（action.type 的值就是 effects 里的方法名，在 model 外 dispatch 需要使用 modelName/effectsMethodName 的格式）

3. 找到方法后就调用方法，把 action 作为参数放在第一个位置。

使用 dispatch 的好处是显而易见的：切分业务模块。

组件不必再负责具体的业务操作（自己动手涮肉），只需要 dispatch action （大喊一声） 到对应的 model 里（给那个负责上菜的人）。

 

作者：龙骑将杨影枫
链接：https://juejin.cn/post/6844903491459088397
来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

 

IntelliJ IDEA本地历史记录

本地历史记录

本地历史记录不能替代正确的源代码管理。

当您安装IntelliJ IDEA的新版本或使缓存无效时，它将被清除。它有一个保留期限和最大规模，所以修改不能保证永远持续下去。

IntelliJ IDEA使用本地历史记录来不断跟踪对项目所做的所有更改。与显示特定提交之间差异的版本控制系统不同，“本地历史记录”自动维护所有有意义事件的修订。这会产生项目结构和源代码变化的详细时间表，并且可以根据需要回滚到任意点。

https://www.jetbrains.com/help/idea/local-history.html

Change the retention period of Local History

Press Ctrl+Shift+A or choose Help | Find Action from the main menu.

Find and open the Registry editor.

Modify the value of the localHistory.daysToKeep parameter.

Click Close and restart IntelliJ IDEA for the changes to take effect.

Alternatively, you can pass the localHistory.daysToKeep parameter as a Java property by configuring JVM options. For example, to set retention to 30 days, add the following line to the JVM options file:

-DlocalHistory.daysToKeep=30

 

On my Windows machine, local history is kept in this folder:

C:\Users\hp\AppData\Local\JetBrains\IntelliJIdea2020.3\LocalHistory

idea中标签按打开顺序排序显示，而不是默认的文件名排序

 

 

执行webpack

1.直接执行文件（全局）：webpack index.js,直接执行该命令，webpack会打包index.js，同时会把index.js中引入的模块打包到默认的路径里，只执行该命令webpack会执行默认的配置文件，使用的是全局安装的webpack

2.直接执行文件（局部）：npx webpack index.js,这个命令多了一个npx,他的作用是使用项目安装的webpack打包而不是全局安装的webpack打包，命令行中默认条用的都是全局命令，执行该命令webpack会执行默认的配置文件

3.配置文件：如果项目中已经配置的webpack.config.js文件，那么直接执行npx webpack就好了，他会找到该文件中的entry定义的入口文件，导出到指定路径并命名

4.npm执行：在项目里的package.json文件的script配置项中，配置命令

 

{
  "name": "webpack",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "bundle": "webpack"
  }
}

备注：在这里配置的命令会默认执行项目中的命令行而忽略全局安装的命令行，所以可以不使用npx执行

作者：晚饭总吃撑
链接：https://www.jianshu.com/p/2c8e6687de28
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

 

入门

Create React App 是一个官方支持的创建 React 单页应用程序的方法。它提供了一个零配置的现代构建设置。

快速开始

npx create-react-app my-app
cd my-app
npm start

然后打开 http://localhost:3000/ 查看你的应用。

当你准备部署到生产环境时，使用 npm run build 创建一个压缩后的 bundle（包）。

立即开始

你 无需 安装或配置 Webpack 或 Babel 等工具。 它们是预先配置好并且隐藏的，因此你可以专注于代码。

只需创建一个项目，就可以了。