Programming

boilerplate

boilerplate（样板）与template（模板）是不同的，boilerplate 一般用于大块的成体系的环境复制，并需要附带大量的说明（文档）和指引。template 则一般是某个单一场景下的，固定下来的模型，外部使用只需修改部分。
As Joachim Pense clearly states, boilerplate is something that you copy and paste and just add to a document. It comes up most often in contracts where language is used and reused, spelling out things like conditions and caveats.
Writers use templates as models, sometimes with negative effects. In broad terms, a template is a model or pattern used to create new objects. In writing, it is a standardized form of something like a resume that writers can use to flesh out their own versions.

Necessary characteristics of boilerplate for large projects (production ready)

  • Good and Readable Documentation 📓
  • Code structure with a deeper abstraction level
  • Follows Proper Coding Standard
  • Has CLI tool (for rapid prototyping and setup)
  • Scalable 📈
  • Easy testing tools
  • Necessary API modules
  • Support for Internationalization and Localization 🌃
  • Code Splitting
  • Server and Client code for setup
  • Proper Navigation and Routing Structure 🚦

source-map

map文件基本结构：

  1. {
  2. 　　version : 3,       //Source map的版本
  3. 　　file: "out.js",    //转换后的文件名
  4. 　　sourceRoot : "",   //转换前的文件所在的目录。如果与转换前的文件在同一目录，该项为空
  5. 　　sources: ["foo.js", "bar.js"],   //转换前的文件。该项是一个数组，表示可能存在多个文件合并
  6. 　　names: ["src", "maps", "are", "fun"],  //转换前的所有变量名和属性名
  7. 　　mappings: "AAgBC,SAAQ,CAAEA"  //记录位置信息的字符串
  8.    sourcesContent: ['xxx', 'xxx'] // 对应sources中文件的源码
  9. }

source-map，eval-source-map

定位清楚，且链接后 devtools加载的是源文件，但是相对的开发中使用可能会出现加载延时的情况，可能需要权衡：
image.png

eval-cheap-source-map

定位模糊
image.png
且已是babel处理过后到文件了：
image.png

hidden-source-map

单纯生成source-map。但是打包文件不做链接到map到处理，所以devtools也就没法使用，可以将生成的 map 文件单独拎出来使用。用这个来处理报错定位就行。