FrankKai

### 一次vuex的状态变更经历哪些步骤？ 组件内的方法 commit (1.判断是否当前类型的mutation2.若有触发mutation) ### Vuex是如何与Vue框架做双向数据绑定的？ 使用了Vue实例作为全局状态树_vm（$$state） deep watch所有属性

### 初识并发模型和事件循环 JavaScript拥有基于event loop的并发模型。 它和C和Java的语言的model非常不同。 #### 基于event loop的并发模型是什么？ - 负责代码的执行 - 收集和处理事件 - 执行队列子任务 ### 运行时概念 下面的这些部分解释了理论模型。 现代的JavaScript引擎实现并且极大程度的去优化了这些实现。 #### 可视化呈现  #### 栈（stack） 从frames stack中调用函数。 ```js function foo(){ let a...

### 使用ProvidePlugin的三种方式 ```js // 语法 new webpack.ProvidePlugin({ identifier: 'module1', // identifier: ['module1', 'property1'], }); ``` - module.exports - 直接引入 - 引入某个函数 - export default #### module.exports ##### 直接引入 ```js new...

### 为何一直引入造成不必要工作量 加入我们有a~z，a.js到z.js总结26个js文件，每个文件都需要引入lodash。 ```js // a.js import $_ from 'lodash'; // b.js import $_ from 'lodash'; // c.js import $_ from 'lodash'; // d.js import $_ from 'lodash'; // e.js...

### 使用ProvidePlugin引入实践 - webpack的plugins中增加$_的配置 - eslint的globals增加$_的配置 - 在Vue中如何使用$_ - 在Vue的template中使用的注意事项 #### webpack的plugins中增加$_的配置 ```js // webpack.base.config.js plugins: [ new webpack.ProvidePlugin({ $_: 'lodash', }), ], ``` #### eslint的globals增加$_的配置 ```js // .eslintrc.js globals:...

### 思考 #### 注入的ProvidePlugin是一个什么东西？ 是一个hooks函数。 ```js hooks () { return hookCallback.apply(null, arguments); } ``` #### 使用ProvidePlugin后会比一直引入减小打包体积吗？ 不会。 反而会略微增大一些，0.0X KB。 这是我自己对比**使用ProvidePlugin前**和**使用ProvidePlugin后**打包文件体积大小得出的结论。 #### 使用ProvidePlugin有哪些注意事项？ 这些注意事项其实主要是为了增强代码可读性和可维护性。 - 尽量定义出唯一性高的全局变量，例如$_,$moment - 同一个前端小组的成员都采用全局变量的方式引入 - 最好是能维护一个全局变量的文档，在新人入职时特殊强调 看到这里，文章开头`Vue.prototype.xxx`和import和require重复引入的问题”有没有更加优雅的实现方式？“就迎刃而解啦。...

### tsc - tsconfig.json - tsconfig-esm.json - package.json #### cjs tsconfig.json ```json { "compilerOptions": { "target": "ES2015", "module": "commonjs", "outDir": "./dist/cjs", "esModuleInterop": true, "moduleResolution": "node" } } ``` #### esm...

### rollup - rollup.config.js - package.json #### rollup.config.js ```js export default [ { input: "src/index.js", output: [ { file: "dist/index.cjs.js", format: "cjs" }, { file: "dist/index.esm.js", format: "es" }, ],...

### webpack - webpack.config.js - package.json #### webpack.config.js ```js const path = require("path"); module.exports = { mode: 'none', entry: { "index.cjs": { import: './src/index.js', library: { type: 'commonjs2', }, },...

### esbuild - package.json ```js { "main": "dist/index.cjs.js", "module": "dist/index.esm.js", "scripts": { "esbuild:cjs": "esbuild ./src/index.js --bundle --outfile=dist/index.cjs.js --format=cjs", "esbuild:esm": "esbuild ./src/index.js --bundle --outfile=dist/index.esm.js --format=esm", "build": "npm run esbuild:cjs && npm...