分别使用gulp和webpack实践javascript source map

1.什么是source map

source map是一个信息文件，里面储存着位置信息。压缩后的代码执行过程中发生错误时，可以通过source map定位错误位置，对线上的项目排错十分有用。

2.生成source map

分别使用gulp和webpack生成javascript source map

1.gulp

  • 通过node脚本添加依赖包
1
2
3
4
$ npm init
$ npm install --save-dev gulp
$ npm install --save-dev gulp-uglify gulp-sourcemaps gulp-util
$ touch gulpfile.js
  • gulp配置文件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
var gulp = require('gulp');
var uglify = require('gulp-uglify');
var gutil = require('gulp-util');
var gsourcemaps = require('gulp-sourcemaps');
gulp.task('build-sourcemap', function() {
	gulp.src('./src/index.js')
		.pipe(gsourcemaps.init())
		.pipe(uglify())
		.on('error', function(err) {
            gutil.log(gutil.colors.red('[Error]'), err.toString());
        })
        .pipe(gsourcemaps.write('./'))
		.pipe(gulp.dest('./dist'));
});
gulp.task('build', function() {
	gulp.src('./src/index.js')
		.pipe(uglify())
		.on('error', function(err) {
            gutil.log(gutil.colors.red('[Error]'), err.toString());
        })
		.pipe(gulp.dest('./dist'));
});
  • 执行脚本命令
1
2
3
4
# 有sourcemap文件
$ gulp build-sourcemap
# 无sourcemap文件
$ gulp build

2.webpack（version: >= 4.0）

  • 通过node脚本添加依赖包
1
2
3
4
5
$ npm init
$ npm install --save-dev webpack webpack-cli
$ npm install --save-dev uglifyjs-webpack-plugin
$ touch webpack.config.js
$ touch webpack.map.config.js
  • webpack配置文件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// webpack.config.js
const path = require('path');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
module.exports = {
	// mode: 'production',
	// mode: 'development',
	mode: 'none',
	entry: [
		'./src/index.js'
	],
	output: {
		path: path.resolve(__dirname, "dist"),
	},
	plugins: [
		new UglifyJsPlugin({}),
	]
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
// webpack.map.config.js
const path = require('path');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
module.exports = {
	// mode: 'production',
	// mode: 'development',
	mode: 'none',
	entry: [
		'./src/index.js'
	],
	output: {
		path: path.resolve(__dirname, "dist"),
	},
	devtool: "source-map", // enum
	plugins: [
		new UglifyJsPlugin({
			sourceMap: true
		}),
	]
}
  • package.json中添加执行脚本
1
2
3
4
"scripts": {
    "build": "webpack --config ./webpack.config.js",
    "build-sourcemap": "webpack --config ./webpack.map.config.js"
}
  • 执行脚本命令
1
2
3
4
# 有sourcemap文件
$ webpack build-sourcemap
# 无sourcemap文件
$ webpack build

3.demo目录

  • 项目目录
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
$ tree source_map -L 3 -I node_modules
source_map
├── gulp_demo
│   ├── dist
│   │   ├── index.js
│   │   └── index.js.map
│   ├── gulpfile.js
│   ├── package-lock.json
│   ├── package.json
│   └── src
│       ├── index.css
│       ├── index.html
│       └── index.js
└── webpack_demo
    ├── dist
    │   ├── main.js
    │   └── main.js.map
    ├── package-lock.json
    ├── package.json
    ├── src
    │   ├── index.css
    │   ├── index.html
    │   └── index.js
    ├── webpack.config.js
    └── webpack.map.config.js

ps:
JavaScript Source Map 详解：http://www.ruanyifeng.com/blog/2013/01/javascript_source_map.html
Gulp文档：https://www.gulpjs.com.cn
Webpack文档：https://www.webpackjs.com/

–end–