169 lines
4.8 KiB
Markdown
169 lines
4.8 KiB
Markdown
# karma-sourcemap-loader
|
|
|
|
> Preprocessor that locates and loads existing source maps.
|
|
|
|
## Why
|
|
|
|
When you use karma not in isolation but as part of a build process (e.g. using grunt
|
|
or gulp) it is often the case that the compilation/transpilation is done on a previous
|
|
step of the process and not handled by karma preprocessors. In these cases source maps
|
|
don't get loaded by karma and you lose the advantages of having them. Collecting
|
|
the test code coverage using an instrumented code with source maps, for example.
|
|
|
|
Another reason may be the need for modifying relative source paths in source maps
|
|
to make sure that they point to source files in the project running the tests.
|
|
|
|
## How it works
|
|
|
|
This plug-in supports both inline and external source maps.
|
|
|
|
Inline source maps are located by searching "sourceMappingURL=" inside the javascript
|
|
file, both plain text and base64-encoded maps are supported.
|
|
|
|
External source maps are located by appending ".map" to the javascript file name.
|
|
So if for example you have Hello.js, the preprocessor will try to load source map from
|
|
Hello.js.map.
|
|
|
|
## Installation
|
|
|
|
Just add `karma-sourcemap-loader` as a devDependency in your `package.json`.
|
|
```json
|
|
{
|
|
"devDependencies": {
|
|
"karma-sourcemap-loader": "~0.3"
|
|
}
|
|
}
|
|
```
|
|
|
|
Or issue the following command:
|
|
```bash
|
|
npm install karma-sourcemap-loader --save-dev
|
|
```
|
|
|
|
## Configuration
|
|
|
|
The code below shows a sample configuration of the preprocessor.
|
|
|
|
```js
|
|
// karma.conf.js
|
|
module.exports = function(config) {
|
|
config.set({
|
|
plugins: ['karma-sourcemap-loader'],
|
|
preprocessors: {
|
|
'**/*.js': ['sourcemap']
|
|
}
|
|
});
|
|
};
|
|
```
|
|
|
|
The code below shows a configuration of the preprocessor with remapping of source file paths in source maps using path prefixes. The object `remapPrefixes` contains path prefixes as keys, which if they are detected in a source path, will be replaced by the key value. After the first detected prefix gets replaced, other prefixes will be ignored..
|
|
|
|
```js
|
|
// karma.conf.js
|
|
module.exports = function(config) {
|
|
config.set({
|
|
plugins: ['karma-sourcemap-loader'],
|
|
preprocessors: {
|
|
'**/*.js': ['sourcemap']
|
|
},
|
|
sourceMapLoader: {
|
|
remapPrefixes: {
|
|
'/myproject/': '../src/',
|
|
'/otherdep/': '../node_modules/otherdep/'
|
|
}
|
|
}
|
|
});
|
|
};
|
|
```
|
|
|
|
The code below shows a configuration of the preprocessor with remapping of source file paths in source maps using a callback. The function `remapSource` receives an original source path and may return a changed source path. If it returns `undefined` or other false-y result, the source path will not be changed.
|
|
|
|
```js
|
|
// karma.conf.js
|
|
module.exports = function(config) {
|
|
config.set({
|
|
plugins: ['karma-sourcemap-loader'],
|
|
preprocessors: {
|
|
'**/*.js': ['sourcemap']
|
|
},
|
|
sourceMapLoader: {
|
|
remapSource(source) {
|
|
if (source.startsWith('/myproject/')) {
|
|
return '../src/' + source.substring(11);
|
|
}
|
|
}
|
|
}
|
|
});
|
|
};
|
|
```
|
|
|
|
The code below shows a sample configuration of the preprocessor with changing the `sourceRoot` property to a custom value, which will change the location where the debugger should locate the source files.
|
|
|
|
```js
|
|
// karma.conf.js
|
|
module.exports = function(config) {
|
|
config.set({
|
|
plugins: ['karma-sourcemap-loader'],
|
|
preprocessors: {
|
|
'**/*.js': ['sourcemap']
|
|
},
|
|
sourceMapLoader: {
|
|
useSourceRoot: '/sources'
|
|
}
|
|
});
|
|
};
|
|
```
|
|
|
|
The code below shows a sample configuration of the preprocessor with changing the `sourceRoot` property using a custom function to be able to compute the value depending on the path to the bundle. The `file` argument is the Karma file object `{ path, originalPath }` for the bundle.
|
|
|
|
```js
|
|
// karma.conf.js
|
|
module.exports = function(config) {
|
|
config.set({
|
|
plugins: ['karma-sourcemap-loader'],
|
|
preprocessors: {
|
|
'**/*.js': ['sourcemap']
|
|
},
|
|
sourceMapLoader: {
|
|
useSourceRoot(file) {
|
|
return '/sources';
|
|
}
|
|
}
|
|
});
|
|
};
|
|
```
|
|
|
|
The code below shows a sample configuration of the preprocessor with source map loading only for files with the `sourceMappingURL` set. The default behaviour is trying to load source maps for all JavaScript files, also those without the `sourceMappingURL` set.
|
|
|
|
```js
|
|
// karma.conf.js
|
|
module.exports = function(config) {
|
|
config.set({
|
|
plugins: ['karma-sourcemap-loader'],
|
|
preprocessors: {
|
|
'**/*.js': ['sourcemap']
|
|
},
|
|
sourceMapLoader: {
|
|
onlyWithURL: true
|
|
}
|
|
});
|
|
};
|
|
```
|
|
|
|
The code below shows a sample configuration of the preprocessor with a strict error checking. A missing or an invalid source map will cause the test run fail.
|
|
|
|
```js
|
|
// karma.conf.js
|
|
module.exports = function(config) {
|
|
config.set({
|
|
plugins: ['karma-sourcemap-loader'],
|
|
preprocessors: {
|
|
'**/*.js': ['sourcemap']
|
|
},
|
|
sourceMapLoader: {
|
|
strict: true
|
|
}
|
|
});
|
|
};
|
|
```
|