Code Monkey home page Code Monkey logo

babel-plugin-source-map-support's Introduction

Build Status NPM Version

NAME

babel-plugin-source-map-support - a Babel plugin which automatically makes stack traces source-map aware

INSTALL

$ npm install source-map-support --save
$ npm install babel-plugin-source-map-support --save-dev

SYNOPSIS

$ cat test.js

import foo from 'foo';
import bar from 'bar';

foo(bar);

$ babel --plugins source-map-support test.js

import 'source-map-support/register';
import foo from 'foo';
import bar from 'bar';

foo(bar);

DESCRIPTION

This is a Babel plugin which prepends the following statement to source files:

import 'source-map-support/register';

In conjunction with the source-map-support module, which must be installed separately, this statement hooks into the v8 stack-trace API to translate call sites in the transpiled code back to their corresponding locations in the original code.

Note: this only works in environments which support the v8 stack-trace API (e.g. Node.js and Chrome), though it's harmless in other environments.

The source-map-support module only needs to be registered in the top-level file(s) of an application, but it no-ops if it has already been loaded, so there's no harm in registering it in every file.

You probably don't want to use this plugin when compiling code for the web because you probably don't want to bundle source-maps and the source-map-support module in minified code. An easy way to limit the plugin's scope to development/test builds is to use Babel's env option, e.g.:

{
    env: {
        development: {
            sourceMaps: 'inline',
            plugins: ['source-map-support', ...]
        }
    },

    presets: [ ... ]
}

Note that source-maps don't need to be inlined in each file. They can be externalised by using the { sourceMaps: true } option. This adds a link to the bottom of each file which points to its generated source-map, e.g.:

{
    env: {
        development: {
            sourceMaps: true,
            plugins: ['source-map-support', ...]
        }
    },
}
// index.js footer:
//# sourceMappingURL=index.js.map

DEVELOPMENT

NPM Scripts

The following NPM scripts are available:

  • build - compile the plugin and save it to the dist directory
  • build:doc - generate the README's TOC (table of contents)
  • clean - remove the dist directory and other build artifacts
  • rebuild - clean the build artifacts and recompile the code
  • test - rebuild the plugin and run the test suite
  • test:debug - run the test script in debug mode, which dumps each transformed test case
  • test:prod - run the test suite in production mode
  • test:run - run the test suite

COMPATIBILITY

SEE ALSO

VERSION

2.2.0

AUTHOR

chocolateboy

COPYRIGHT AND LICENSE

Copyright © 2015-2022 by chocolateboy.

This module is free software; you can redistribute it and/or modify it under the terms of the Artistic License 2.0.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.