web-advance web-extend

README.md

@@ -1,56 +1,56 @@
 ## 前端进阶
 
-1. [\[2018-06-15\] 前后端分离、web 与 static 服务器分离](./advanced/1.md)
-2. [\[2018-06-15\] 本地化接口模拟、前后端并行开发](./advanced/2.md)
-3. [\[2018-06-15\] 前端开发规范](./advanced/3.md)
-4. [\[2018-06-15\] 前端开发文档](./advanced/4.md)
-5. [\[2018-06-15\] 构建工具 for teamwork](./advanced/5.md)
-6. [\[2018-06-15\] 组件化](./advanced/6.md)
-7. [\[2018-06-15\] 私有 npm 仓库](./advanced/7.md)
-8. [\[2018-06-15\] 单页面应用（SPA）、按需加载](./advanced/8.md)
-9. [\[2018-06-15\] 服务器端渲染（SSR）与 node 中间层](./advanced/9.md)
-10. [\[2018-06-27\] CSS 模块化](./advanced/10.md)
-11. [\[2018-07-30\] 目录结构优化](./advanced/11.md)
-12. [\[2018-08-02\] 怎样提升代码质量](./advanced/12.md)
-13. [\[2018-08-02\] 清理服务器上 webpack 打包的过期 hash 文件](./advanced/13.md)
-14. [\[2018-08-23\] js 扩展：静态类型检查（facebook flow）](./advanced/14.md)
-15. [\[2018-08-24\] webpack 之外的另一种选择：rollup](./advanced/15.md)
-16. [\[2018-09-11\] react、vue 组件开发利器：storybook](./advanced/16.md)
-17. [\[2018-09-14\] 前端开发需要了解的工具集合：webpack, eslint, prettier, ...](./advanced/17.md)
-18. [\[2018-09-15\] js 性能优化利器：prepack](./advanced/18.md)
-19. [\[2018-09-15\] webpack 之外的另一种选择：parcel](./advanced/19.md)
-20. [\[2018-09-15\] js 数据结构类型扩展：immutable-js](./advanced/20.md)
-21. [\[2018-09-17\] css 的弱化与 js 的强化](./advanced/21.md)
-22. [\[2018-09-21\] 搭建自己的前端脚手架](./advanced/22.md)
-23. [\[2018-10-23\] 如何提升前端性能和响应速度](./advanced/23.md)
+1. [\[2018-06-15\] 前后端分离、web 与 static 服务器分离](web-advance/1.md)
+2. [\[2018-06-15\] 本地化接口模拟、前后端并行开发](web-advance/2.md)
+3. [\[2018-06-15\] 前端开发规范](web-advance/3.md)
+4. [\[2018-06-15\] 前端开发文档](web-advance/4.md)
+5. [\[2018-06-15\] 构建工具 for teamwork](web-advance/5.md)
+6. [\[2018-06-15\] 组件化](web-advance/6.md)
+7. [\[2018-06-15\] 私有 npm 仓库](web-advance/7.md)
+8. [\[2018-06-15\] 单页面应用（SPA）、按需加载](web-advance/8.md)
+9. [\[2018-06-15\] 服务器端渲染（SSR）与 node 中间层](web-advance/9.md)
+10. [\[2018-06-27\] CSS 模块化](web-advance/10.md)
+11. [\[2018-07-30\] 目录结构优化](web-advance/11.md)
+12. [\[2018-08-02\] 怎样提升代码质量](web-advance/12.md)
+13. [\[2018-08-02\] 清理服务器上 webpack 打包的过期 hash 文件](web-advance/13.md)
+14. [\[2018-08-23\] js 扩展：静态类型检查（facebook flow）](web-advance/14.md)
+15. [\[2018-08-24\] webpack 之外的另一种选择：rollup](web-advance/15.md)
+16. [\[2018-09-11\] react、vue 组件开发利器：storybook](web-advance/16.md)
+17. [\[2018-09-14\] 前端开发需要了解的工具集合：webpack, eslint, prettier, ...](web-advance/17.md)
+18. [\[2018-09-15\] js 性能优化利器：prepack](web-advance/18.md)
+19. [\[2018-09-15\] webpack 之外的另一种选择：parcel](web-advance/19.md)
+20. [\[2018-09-15\] js 数据结构类型扩展：immutable-js](web-advance/20.md)
+21. [\[2018-09-17\] css 的弱化与 js 的强化](web-advance/21.md)
+22. [\[2018-09-21\] 搭建自己的前端脚手架](web-advance/22.md)
+23. [\[2018-10-23\] 如何提升前端性能和响应速度](web-advance/23.md)
 
 ## 前端扩展
 
-1. [\[2018-08-21\] 从 1 到完美，用 js 和 electron 写一个桌面应用](./extend/1.md)
-2. [\[2018-09-05\] 从 1 到完美，用 js 和 react-native 写一个 APP](./extend/2.md)
-3. [\[2018-09-12\] package.json 非官方字段集合](./extend/3.md)
-4. [\[2018-10-11\] 如何构建大型的前端项目](./extend/4.md)
-5. [\[2018-10-16\] 细说后端模板渲染、客户端渲染、node 中间层、服务器端渲染（ssr）](./extend/5.md)
-6. [\[2018-10-22\] h5 与原生 app 交互的原理](./extend/6.md)
-7. [\[2018-10-30\] 前端如何高效的与后端协作开发](./extend/7.md)
-8. [\[2018-11-12\] 细说 js 压缩、sourcemap、通过 sourcemap 查找原始报错信息](./extend/8.md)
-9. [\[2018-11-19\] 从 1 到完美，写一个 js 库、node 库、前端组件库](./extend/9.md)
-10. [\[2018-11-27\] 从 0 到 1 再到 100, 搭建、编写、构建一个前端项目](./extend/10.md)
-11. [\[2018-12-04\] 通用、封装、简化 webpack 配置](./extend/11.md)
-12. [\[2018-12-17\] react 前端项目技术选型、开发工具、周边生态](./extend/12.md)
-13. [\[2018-12-22\] vue 前端项目技术选型、开发工具、周边生态](./extend/13.md)
-14. [\[2019-01-05\] 前端开发如何做好本地接口模拟](./extend/14.md)
-15. [\[2019-01-23\] web 应用常见安全漏洞一览](./extend/15.md)
-16. [\[2019-02-19\] 前端项目如何管理](./extend/16.md)
-17. [\[2019-03-12\] 自己常用的前端项目脚手架模板](./extend/17.md)
-18. [\[2019-05-29\] 细说 Vue 组件的服务器端渲染](./extend/18.md)
-19. [\[2019-05-29\] 再谈前端项目的组件化](./extend/19.md)
-20. [\[2019-08-13\] 批量转换 AMD 与 CommonJs 模块到 ES 模块](./extend/20.md)
+1. [\[2018-08-21\] 从 1 到完美，用 js 和 electron 写一个桌面应用](web-extend/1.md)
+2. [\[2018-09-05\] 从 1 到完美，用 js 和 react-native 写一个 APP](web-extend/2.md)
+3. [\[2018-09-12\] package.json 非官方字段集合](web-extend/3.md)
+4. [\[2018-10-11\] 如何构建大型的前端项目](web-extend/4.md)
+5. [\[2018-10-16\] 细说后端模板渲染、客户端渲染、node 中间层、服务器端渲染（ssr）](web-extend/5.md)
+6. [\[2018-10-22\] h5 与原生 app 交互的原理](web-extend/6.md)
+7. [\[2018-10-30\] 前端如何高效的与后端协作开发](web-extend/7.md)
+8. [\[2018-11-12\] 细说 js 压缩、sourcemap、通过 sourcemap 查找原始报错信息](web-extend/8.md)
+9. [\[2018-11-19\] 从 1 到完美，写一个 js 库、node 库、前端组件库](web-extend/9.md)
+10. [\[2018-11-27\] 从 0 到 1 再到 100, 搭建、编写、构建一个前端项目](web-extend/10.md)
+11. [\[2018-12-04\] 通用、封装、简化 webpack 配置](web-extend/11.md)
+12. [\[2018-12-17\] react 前端项目技术选型、开发工具、周边生态](web-extend/12.md)
+13. [\[2018-12-22\] vue 前端项目技术选型、开发工具、周边生态](web-extend/13.md)
+14. [\[2019-01-05\] 前端开发如何做好本地接口模拟](web-extend/14.md)
+15. [\[2019-01-23\] web 应用常见安全漏洞一览](web-extend/15.md)
+16. [\[2019-02-19\] 前端项目如何管理](web-extend/16.md)
+17. [\[2019-03-12\] 自己常用的前端项目脚手架模板](web-extend/17.md)
+18. [\[2019-05-29\] 细说 Vue 组件的服务器端渲染](web-extend/18.md)
+19. [\[2019-05-29\] 再谈前端项目的组件化](web-extend/19.md)
+20. [\[2019-08-13\] 批量转换 AMD 与 CommonJs 模块到 ES 模块](web-extend/20.md)
 
 ## 前端漫谈
 
-1. [\[2018-00-10\] 前端最受欢迎的 UI 框架](./intro/1.md)
-2. [\[2018-09-26\] github 上有趣又实用的前端项目（持续更新，欢迎补充）](intro/2.md)
+1. [\[2018-00-10\] 前端最受欢迎的 UI 框架](web-intro/1.md)
+2. [\[2018-09-26\] github 上有趣又实用的前端项目（持续更新，欢迎补充）](web-intro/2.md)
 
 ## JavaScript
 
@@ -60,10 +60,10 @@
 
 ## NodeJs
 
-1. [\[2018-09-28\] 从 1 到完美，用 node 写一个命令行工具](./node/1.md)
-2. [\[2018-11-06\] 构建工具是如何用 node 操作 html/js/css/md 文件的](./node/2.md)
-3. [\[2018-12-10\] 如何让 node 运行 es6 模块文件，及其原理](./node/3.md)
-4. [\[2019-03-29\] 如何查看一个 js, ts 文件模块的依赖树](./node/4.md)
+1. [\[2018-09-28\] 从 1 到完美，用 node 写一个命令行工具](nodejs/1.md)
+2. [\[2018-11-06\] 构建工具是如何用 node 操作 html/js/css/md 文件的](nodejs/2.md)
+3. [\[2018-12-10\] 如何让 node 运行 es6 模块文件，及其原理](nodejs/3.md)
+4. [\[2019-03-29\] 如何查看一个 js, ts 文件模块的依赖树](nodejs/4.md)
 
 ## 杂项
 

advanced/12.md → web-advance/12.md

@@ -256,9 +256,9 @@ trim_trailing_whitespace = false        # .md 文件不去掉每行末尾的空
 
 1. 模块化：
    - js 的模块化已经很成熟了，目前使用最多的是 `commonjs` 模块化规范和 `es6` 模块；
-   - css 的模块化也一直在探索中，之前也专门写了一篇 [CSS 模块化](../advanced/10.md)，可以参考下；
+   - css 的模块化也一直在探索中，之前也专门写了一篇 [CSS 模块化](/10.md)，可以参考下；
    - html 没有模块化，但是可以将一个很长的 html 文件进行分块，参考 [html-loader](https://github.com/webpack-contrib/html-loader)。
-2. 组件化：当项目变大、变多，很多公共的代码需要复用或者跨项目使用的时候，组件化就变得很必要了，之前也专门写了一篇 [组件化](../advanced/6.md)，可以参考下；
+2. 组件化：当项目变大、变多，很多公共的代码需要复用或者跨项目使用的时候，组件化就变得很必要了，之前也专门写了一篇 [组件化](/6.md)，可以参考下；
 3. 逻辑解耦：把一个复杂的逻辑，分割成多个子逻辑，然后将子逻辑串起来，或者把多个交叉逻辑的公共部分拆出来，然后再挨个串起来；
 4. 功能分块：细化一个一个的功能为单独的模块。
 

advanced/17.md → web-advance/17.md

@@ -106,7 +106,7 @@ npm install --save-dev babel-cli
 
 这个工具能够检查 js 语法（包括 jsx 语法），然后最大程度的矫正不符合规范的代码。对于提升个人代码质量，保证团队代码规范和代码风格是相当有用的。
 
-[eslint](https://github.com/eslint/eslint) 一般会配合 [husky](https://github.com/typicode/husky) 与 [lint-staged](https://github.com/okonet/lint-staged) 一起使用。详细用法可以参考 [怎样提升代码质量](../advanced/12.md)。
+[eslint](https://github.com/eslint/eslint) 一般会配合 [husky](https://github.com/typicode/husky) 与 [lint-staged](https://github.com/okonet/lint-staged) 一起使用。详细用法可以参考 [怎样提升代码质量](/12.md)。
 
 #### 安装
 
@@ -122,7 +122,7 @@ npm install --save-dev eslint
 
 这个工具能够检查 css 语法（包括 less, scss 语法），然后最大程度的矫正不符合规范的代码。对于提升个人代码质量，保证团队代码规范和代码风格是相当有用的。
 
-[stylelint](https://github.com/stylelint/stylelint) 一般会配合 [husky](https://github.com/typicode/husky) 与 [lint-staged](https://github.com/okonet/lint-staged) 一起使用。详细用法可以参考 [怎样提升代码质量](../advanced/12.md)。
+[stylelint](https://github.com/stylelint/stylelint) 一般会配合 [husky](https://github.com/typicode/husky) 与 [lint-staged](https://github.com/okonet/lint-staged) 一起使用。详细用法可以参考 [怎样提升代码质量](/12.md)。
 
 #### 安装
 
@@ -138,7 +138,7 @@ npm install --save-dev stylelint
 
 这个工具能够优化 `js, jsx, ts, css, less, scss, json, md, ...`，对于保证团队代码风格是相当有用的。
 
-[prettier](https://github.com/prettier/prettier) 一般会配合 [husky](https://github.com/typicode/husky) 与 [lint-staged](https://github.com/okonet/lint-staged) 一起使用。详细用法可以参考 [怎样提升代码质量](../advanced/12.md)。
+[prettier](https://github.com/prettier/prettier) 一般会配合 [husky](https://github.com/typicode/husky) 与 [lint-staged](https://github.com/okonet/lint-staged) 一起使用。详细用法可以参考 [怎样提升代码质量](/12.md)。
 
 #### 安装
 

advanced/18.md → web-advance/18.md

@@ -69,7 +69,7 @@ const user = users.find(item => item.age === 1 && item.active === true);
 
 现在前端打包基本上都会用 [webpack](https://github.com/webpack/webpack)，但 `webpack` 打包之后的文件会产生很多冗余代码，这会导致 `js` 性能降低。
 
-如果在打包文件的性能上有特别需求的小伙伴，可以使用 [rollup](https://github.com/rollup/rollup)，详细使用与对比可以参考这里 [webpack 之外的另一种选择：rollup](../advanced/15.md).
+如果在打包文件的性能上有特别需求的小伙伴，可以使用 [rollup](https://github.com/rollup/rollup)，详细使用与对比可以参考这里 [webpack 之外的另一种选择：rollup](/15.md).
 
 ### 1.3 代码预编译
 

advanced/19.md → web-advance/19.md

@@ -1,6 +1,6 @@
 # webpack 之外的另一种选择：parcel
 
-之前有写过一篇 [webpack 之外的另一种选择：rollup](../advanced/15.md)，这次算是姊妹篇，介绍另外一个工具 [parcel](https://github.com/parcel-bundler/parcel).
+之前有写过一篇 [webpack 之外的另一种选择：rollup](/15.md)，这次算是姊妹篇，介绍另外一个工具 [parcel](https://github.com/parcel-bundler/parcel).
 
 现在前端打包基本上都会用 [webpack](https://github.com/webpack/webpack)，但经常使用 `webpack` 的开发者基本都有一个体会：配置比较复杂，尤其是有很多项目的时候，更新需要到处改配置。
 

advanced/21.md → web-advance/21.md

@@ -2,7 +2,7 @@
 
 `web` 的三要素 `html, css, js` 在前端组件化的过程中，比如 [react](https://github.com/facebook/react)、[vue](https://github.com/vuejs/vue) 等组件化框架的运用，使 `html 的弱化与 js 的强化` 成为了一种趋势，而在这个过程中，其实还有另一种趋势也在慢慢形成：`css 的弱化与 js 的强化`。
 
-之前有写过一篇 [CSS 模块化](../advanced/10.md)，但对 `css in js` 这种理念没有过多讲解，所以这次深入一下。
+之前有写过一篇 [CSS 模块化](/10.md)，但对 `css in js` 这种理念没有过多讲解，所以这次深入一下。
 
 `css in js` 理念，即是摒弃原有的用 `.css` 文件书写样式，而把样式写进 `js` 里面，这样就可以做到一个组件对应一个文件、一个文件便是一个组件。
 

advanced/22.md → web-advance/22.md

@@ -111,7 +111,7 @@
 
 如果你将当前的项目发布为一个 npm 包，而其他的包在引用你的包时，构建工具就会去找 `main` 字段定义的入口文件，详细参考 [package.json#main](https://docs.npmjs.com/files/package.json#main)。
 
-还有其他的特殊的入口文件，参考 [package.json 非官方字段集合](../extend/3.md)。
+还有其他的特殊的入口文件，参考 [package.json 非官方字段集合](../web-extend/3.md)。
 
 ### 1.2 `bin`: 配置命令行可执行文件
 

advanced/23.md → web-advance/23.md

@@ -214,7 +214,7 @@ module.exports =
 可以参考：
 
 - [rollup](https://github.com/rollup/rollup)
-- [webpack 之外的另一种选择：rollup](../advanced/15.md)
+- [webpack 之外的另一种选择：rollup](/15.md)
 
 ## 10. [prepack](https://github.com/facebook/prepack)
 
@@ -251,7 +251,7 @@ module.exports =
 可以参考：
 
 - [prepack](https://github.com/facebook/prepack)
-- [js 性能优化利器：prepack](../advanced/18.md)
+- [js 性能优化利器：prepack](/18.md)
 
 ## 11. css 选择器不要嵌套太深
 

advanced/6.md → web-advance/6.md

@@ -98,7 +98,7 @@ const component1 = require('@yourCompany/component1');
 import component1 from '@yourCompany/component1';
 ```
 
-独立化组件与私有 npm 仓库配合使用是最完美的，下一节 [私有 npm 仓库](../advanced/7.md) 将会讲到。
+独立化组件与私有 npm 仓库配合使用是最完美的，下一节 [私有 npm 仓库](/7.md) 将会讲到。
 
 ```
 # npm

extend/10.md → web-extend/10.md

@@ -108,7 +108,7 @@ npm start
 
 参考：
 
-- [webpack 之外的另一种选择：parcel](../advanced/19.md)
+- [webpack 之外的另一种选择：parcel](../web-advance/19.md)
 
 ## 4. 确定是单页面应用（SPA）还是多页面应用
 
@@ -140,7 +140,7 @@ http://www.example.com/page3 -> path/to/page3.html
 
 参考：
 
-- [单页面应用（SPA）、按需加载](../advanced/8.md)
+- [单页面应用（SPA）、按需加载](../web-advance/8.md)
 
 ## 5. 选择合适的前端框架与 UI 库
 
@@ -160,7 +160,7 @@ http://www.example.com/page3 -> path/to/page3.html
 
 参考：
 
-- [前端最受欢迎的 UI 框架](../intro/1.md)
+- [前端最受欢迎的 UI 框架](../web-intro/1.md)
 
 ## 6. 定好目录结构
 
@@ -230,13 +230,13 @@ http://www.example.com/page3 -> path/to/page3.html
 
 参考：
 
-- [目录结构优化](../advanced/11.md)
+- [目录结构优化](../web-advance/11.md)
 
 ## 7. 搭建一个好的脚手架
 
 搭建一个好的脚手架，能够更好的编写代码、构建项目等。
 
-可以查看 [搭建自己的前端脚手架](../advanced/22.md) 了解一些基本的脚手架文件与工具。
+可以查看 [搭建自己的前端脚手架](../web-advance/22.md) 了解一些基本的脚手架文件与工具。
 
 比如：
 
@@ -275,11 +275,11 @@ http://www.example.com/page3 -> path/to/page3.html
 
 参考：
 
-- [搭建自己的前端脚手架](../advanced/22.md)
-- [怎样提升代码质量](../advanced/12.md)
-- [CSS 模块化](../advanced/10.md)
-- [css 的弱化与 js 的强化](../advanced/21.md)
-- [本地化接口模拟、前后端并行开发](../advanced/2.md)
+- [搭建自己的前端脚手架](../web-advance/22.md)
+- [怎样提升代码质量](../web-advance/12.md)
+- [CSS 模块化](../web-advance/10.md)
+- [css 的弱化与 js 的强化](../web-advance/21.md)
+- [本地化接口模拟、前后端并行开发](../web-advance/2.md)
 
 =================================================
 
@@ -365,7 +365,7 @@ http://www.example.com/page3 -> path/to/page3.html
 
 参考：
 
-- [搭建自己的前端脚手架](../advanced/22.md)
+- [搭建自己的前端脚手架](../web-advance/22.md)
 
 ## 10. 组件化
 
@@ -408,13 +408,13 @@ import compoennt1 from 'compoennt1';
 import compoennt2 from 'compoennt2';
 ```
 
-如果想要了解怎样写好一个组件（`npm package`），可以参考 [从 1 到完美，写一个 js 库、node 库、前端组件库](../extend/9.md)。
+如果想要了解怎样写好一个组件（`npm package`），可以参考 [从 1 到完美，写一个 js 库、node 库、前端组件库](/9.md)。
 
 参考：
 
-- [组件化](../advanced/6.md)
-- [私有 npm 仓库](../advanced/7.md)
-- [从 1 到完美，写一个 js 库、node 库、前端组件库](../extend/9.md)
+- [组件化](../web-advance/6.md)
+- [私有 npm 仓库](../web-advance/7.md)
+- [从 1 到完美，写一个 js 库、node 库、前端组件库](/9.md)
 
 ## 11. 测试
 
@@ -621,12 +621,12 @@ window.onerror = (errorMessage, scriptURI, lineNumber, columnNumber, errorObj) =
 };
 ```
 
-线上的 `js` 脚本都是压缩过的，需要用 `sourcemap` 文件与 [source-map](https://github.com/mozilla/source-map) 查看原始的报错堆栈信息，可以参考 [细说 js 压缩、sourcemap、通过 sourcemap 查找原始报错信息](../extend/8.md) 了解详细信息。
+线上的 `js` 脚本都是压缩过的，需要用 `sourcemap` 文件与 [source-map](https://github.com/mozilla/source-map) 查看原始的报错堆栈信息，可以参考 [细说 js 压缩、sourcemap、通过 sourcemap 查找原始报错信息](/8.md) 了解详细信息。
 
 参考：
 
-- [前端如何高效的与后端协作开发](../extend/7.md)
-- [细说 js 压缩、sourcemap、通过 sourcemap 查找原始报错信息](../extend/8.md)
+- [前端如何高效的与后端协作开发](/7.md)
+- [细说 js 压缩、sourcemap、通过 sourcemap 查找原始报错信息](/8.md)
 
 ## 后续