Js debugging environment can not solve the production problems

demo：https://github.com/chenchunyong/source-map-demo.git

background

Front-end development, the development and production environments often inconsistent code, the code production incorporated by build tool, confusion, compression operation. But by building a tool to generate js code readability is poor, is not conducive to the maintenance, troubleshooting.

solution

First, by constructing two production tool generates js file as follows:

• Visible to all users js, such as bundle.js
• Js specific user, troubleshoot problems with, this js file will be added sourcemap references, for example bundle.debug.js

Then, according to the user input url sourcemap parameter is included to determine whether to start sourcemap debugging. For example, if you include sourcemap parameter is introduced bundle.debug.js, or the introduction of bundle.js.

use

1. clone

   1	git clone https://github.com/chenchunyong/source-map-demo.git

2. Into the source-map-demo directory, installation

   1	npm install

3. Packaging js file

   1	npm run bundle

4. start up

   1	Elevation start

Enter http: // localhost: 3000 or http: // localhost:? 3000 sourcemap = true viewing.

Effect of contrast

1. Enter http: // localhost: 3000
   

2. Enter http: // localhost:? 3000 sourcemap = true
   

Original: Large column  to solve production problems can not debug environment js