Skip to content

Latest commit

 

History

History
93 lines (77 loc) · 4.41 KB

前端工程化.md

File metadata and controls

93 lines (77 loc) · 4.41 KB

npm包版本号~与^的区别

  1. ~:允许小版本迭代,具体规则:

    • 如果有缺省值,缺省部分任意迭代;
    • 如果没有缺省值,只允许补丁即修订号的迭代

    例子:

    • ~1.2.3:>=1.2.3 <1.3.0
    • ~1.2:>=1.2.0 < 1.3.0(相当于1.2.x)
    • ~1:>=1.0.0 <2.0.0(相当于1.x)
    • ~0.2.3:>=0.2.3 <0.3.0
    • ~0.2:>=0.2.0 <0.3.0(相当于0.2.x)
    • ~0:>=0.0.0 <1.0.0(相当于0.x)
    • ~1.2.3-beta.2:>=1.2.3-beta.2 <1.3.0【注意,在1.2.3版本中,允许使用大于等于beta.2的先行版本号,而除1.2.3之外的版本号不允许使用先行版本号,所以此处1.2.3-beta.4是允许的,而1.2.4-beta.2是不允许的】
  2. ^:允许大版本迭代,具体规则:

    • 允许从左到右的第一段不为0那一版本位+1迭代(左闭右开);
    • 如果有缺省值,且缺省值之前没有不为0的版本位,则允许缺省值的前一位版本+1迭代

    例子:

    • ^1.2.3:>=1.2.3 <2.0.0
    • ^0.2.3:>=0.2.3 <0.3.0
    • ^0.0.3:>=0.0.3 <0.0.4
    • ^1.2.x:>=1.2.0 <2.0.0
    • ^0.0.x:>=0.0.0 <0.1.0
    • ^0.0:>=0.0.0 <0.1.0
    • ^1.x:>=1.0.0 <2.0.0
    • ^0.x:>=0.0.0 <1.0.0
    • ^1.2.3-beta.2:>=1.2.3-beta.2 <2.0.0【注意,在1.2.3版本中,允许使用大于等于beta.2的先行版本号,而除了1.2.3之外的版本号不允许使用先行版本号,所以此处1.2.3-beta.4是允许的,而1.2.4-beta.2是不允许的】;
    • ^0.0.3-beta:>=0.0.3-beta <0.0.4【同上,此处0.0.3-pr.2是允许的】

参考:

  1. https://itbilu.com/nodejs/npm/Nkq9GPy1Z.html
  2. https://www.cnblogs.com/danghuijian/p/5890098.html 注:这篇有个错误,wanted并不是package.json里写的版本,而是package.json里指定的能满足semver的最高版本,参考:https://docs.npmjs.com/cli/outdated 比如,在kaola-contentms-fed中,npm outdated,显示的其中一个包:

`npm view autoprefixer`,显示该包信息,找到它的versions:

package.json中规则:

即要求autoprefixer包的版本需要>=7.1.2 <8.0.0,而满足这个范围的版本中的最高版本是 7.2.6,所以wanted为7.2.6(有时wanted会比latest高,见官方说明:https://docs.npmjs.com/cli/outdated ) 3. https://cnodejs.org/topic/581d96d5bb9452c9052e7b58 4.

构建工具

  1. webpack(http://webpack.wuhaolin.cn/、https://www.cnblogs.com/whkl-m/p/6627864.html)
  2. webpack打包原理:https://juejin.im/post/5aa54608f265da23826d9b34、https://zhuanlan.zhihu.com/p/32093510、http://taobaofed.org/blog/2016/09/09/webpack-flow/
  3. 如何写webpack插件:https://juejin.im/post/5a5c18f2518825734f52ad65
  4. webpack常用loader、plugin
  5. webpack模块机制
  6. webpack打包优化, dll、happypack、模块懒加载等等
  7. babel
  8. parcel(?有个空也了解下)

Webpack 4

https://juejin.im/post/5ab749036fb9a028b77ac506?utm_source=gold_browser_extension

babel、webpack 把 ES6 转 ES5 相关

http://blog.csdn.net/qq_30100043/article/details/53402618、https://rlilyyy.github.io/2016/05/04/Webpack-Babel-%E4%BD%BF%E7%94%A8-ES6-%E6%96%B0%E7%89%B9%E6%80%A7/、https://github.com/Wscats/webpack/issues/4

前端模块化(AMD、CMD等等)

https://github.com/kaola-fed/blog/issues/157、https://www.zhihu.com/question/56820346

CommonJS模块化和es6模块化机制

https://www.cnblogs.com/tiantianwaigong/p/6194091.html kaola-fed/blog#157 kaola-fed/blog#16 kaola-fed/blog#20

组件化和模块化区别

http://tutuge.me/2016/03/29/modular-and-component-summary/

大公司里怎样开发和部署前端代码

fouber/blog#6

前端工程——基础篇

fouber/blog#10

参考:https://www.zhihu.com/question/24558375