source-map

关于source-map的一些资料

部分内容来自于 ryanseddon/source-map wiki

Spec & Standards

• source-map-sepc
• sourcemap v2 proposal
• sourcemap v3 proposal
• source-map-rfc
• source-map.github.io
• mozilla.dev.js-sourcemap mailing list (好像已经不活跃了)

文章

• SourceMap原理分析&vlq
• 介绍SourceMap的一篇经典文章 (非常详细，但某些内容可能过时了)
• web.dev上介绍SourceMap的另一篇文章
• SourceMap 原理(中文)
• source map 的原理探究
• 深入浅出之 SourceMap
• SourceMap 是个啥
• 源码映射(SourceMap)
• Compiling to JavaScript, and Debugging with Source Maps

工具

• SourceMap 可视化工具1
• SourceMap 可视化工具2
• SourceMap 可视化工具3
• base64vlq 验证器1
• base64vlq 验证器2(自己实现的)

相关项目

• mozilla/source-map
• source-map-spec
• source-map-rfc

x_google_ignoreList 扩展

• x_google_ignoreList 扩展
• Modern web debugging in Chrome DevTools
• Case Study: Better Angular Debugging with DevTools

Tools that generate source maps

• Closure Compiler - The Closure Compiler is a tool for making JavaScript download and run faster.
• Importer - Adds an #import statement to JavaScript-based languages. Generates a combined source map from all input files.
• Ender - the no-library library: open module JavaScript framework
• Faye - Faye is a publish-subscribe messaging system based on the Bayeux protocol.
• Packr - Ruby version of Dean Edwards' Packer
• Ruby Source map gem - Ruby library for interacting with the awesome javascript SourceMaps.
• Mozilla source-map - Mozilla node lib to read and generate source maps
• UglifyJS2 - JavaScript parser / mangler / compressor / beautifier toolkit
• JSMin - A fork of JSMin to add sourcemap support (and it's companion grunt plugin)
• esmangle - js minifier / mangler
• AjaxMin - JS/CSS minifier for .NET
• browserify - Use a node-style require() to organize your browser code and load modules installed by npm.
• webpack - similar to browserify
• multi-stage-sourcemap - helper module for multi-level source maps
• Gobble - flexible build system for JS/CSS
• RollUp - Bundler for ES2015 modules

Tools that consume source maps

• Chrome DevTools
• Firefox DevTools
• Edge DevTools (F12)
• WebStorm
• Sentry - error logging
• SourceMap Validator
• Sourcemap visualisation tool (qfox)
• sokra/source-map-visualization & visualization launcher
• node-sourcemap-support - Adds source map support to node.js (for stack traces)

Languages that compile to javascript and support source map generation

• JSX - a faster, safer, easier alternative to JavaScript
• GWT - GWT (formerly the Google Web Toolkit). GWT's mission is to radically improve the web experience for users by enabling developers to use existing Java tools to build no-compromise AJAX for any modern browser.
• Traceur - Traceur is a JavaScript.Next ➡ JavaScript compiler that allows you to use features from the future today.
• TypeScript - TypeScript is a language for application-scale JavaScript development. TypeScript is a typed superset of JavaScript that compiles to plain JavaScript. Any browser. Any host. Any OS. Open Source.
• CoffeeScript - CoffeeScript supports source maps as of version 1.6.
• CoffeeScript Redux - The redux compiler does create sourcemaps, is not production ready, but is progressing quickly.
• LiveScript - LiveScript supports source maps as of version 1.4.0
• Dart - JavaScript alternative from Google
• Haxe - The well known multiplatform open-source programming language. Compiling with the -debug flag will create a .map alongside the .js file
• Opal - a Ruby to JavaScript compiler
• Scala.js - a Scala to JavaScript compiler
• WebSharper - WebSharper provides robust functional web abstractions and an F# to JavaScript compiler, and supports the generation of source maps as of WebSharper 3 alpha.
• Transcrypt - Compiles extensive subset of Python 3.5 to fast, readable Javascript, incl. multiple inheritance, seamless JS lib interop, operator overloading, keyword args and call memoization for speed. Open source.
• Kotlin - Statically typed programming language for modern multiplatform applications. See Debugging Kotlin in browser

Articles about source maps

• HTML5 Rocks - Introduction to JavaScript Source Maps
• The Breakpoint Ep 3: The Sourcemap Spectacular with Paul Irish and Addy Osmani - shows CoffeeScript ➡ UglifyJS ➡ min.js and back again.
• Source map support added to Packr and Jake
• Using Source Maps with TypeScript
• CoffeeScript Source Maps
• 7-minute Guide to Source Maps With CoffeeScript and Uglify.js
• Source Maps 101
• Dynamic Source Maps
• Example of Dynamic Source Maps
• Source maps in browserify
• All you need to know about jQuery Source Maps - Brief tutorial for viewing in Chrome
• Compiling to JavaScript, and Debugging with Source Maps - How to write a compiler targeting JS and have it support source maps.

Source maps for CSS

• DevTools: Working with CSS Preprocessors - full documentation and setup for using CSS sourcemaps.
• The Breakpoint on real CSS sourcemaps - Sass landed v3 sourcemap generation which will debut soon (along with Chrome DevTools UI support)

CSS sourcemap support (source):

• Sass: As described above, this is supported in Sass 3.3.
• Compass: The --sourcemap flag was implemented in Compass 1.0. Alternatively you can add sourcemap: true to your config.rb file. Demo repo here. Development notes are in issue 1108.
• Less: Implemented in 1.5.0. See issue #1050 for details and usage patterns.
• Autoprefixer: Implemented in 1.0. Autoprefixer docs explain how to use it, along with absorbing an input sourcemap (from another preprocessor).
• Libsass: Implemented.
• Stylus: Implemented. See the latest in issue #1655.