JSDev: A small tool used to optimize the JavaScript development process

JSDev is a rare gadget recently developed by Douglas Crockford. His general idea is to pre-process JavaScript and selectively convert comments into corresponding code. The annotation block processed by JSDev has the following two forms:

 
 

  
  
/*<tag> <stuff>*/ 
  
  
/*<tag>(<condition>) <stuff>*/ 
 
 

Then you can specify the tags enabled by JSDev. Then, JSDev will change this annotation to the corresponding code, and these annotations will not work normally in JavaScript, after JSMin and other tools are compressed, all of them will be removed, which facilitates JavaScript development.

In the beginning, old Dao only provided the C-language version of the program. A few days later, he provided the JavaScript version. I thought it became interesting and I had to spend two days, I want to see if idea can be used in future development projects. Next we will take the C program as an example to illustrate the usage of JSDev, and then talk about how to use it in node development or front-end development through the JavaScript version. This article assumes that you work in Unix-like systems (Linux/FreeBSD/Mac OS) and have some knowledge of command line and node programming.

C language version and JSDev usage

Clone my fork from github and compile the C source code into an executable file.

 
 

  
  
Git clone https://github.com/yuest/jsdev.git # clone source code on github to local
  
  
Cd jsdev
  
  
Gcc jsdev. c # compile the C version
  
  
Sudo mv a. out/usr/local/bin/jsdev # Move the compiled executable file to the directory under $ PATH
 
 

Now we can use jsdev to run the program. However, if you enter jsdev in the command line and press enter, there is nothing. In the past, the old saying only made the core part of this tool, but did not make any effort on the software interface, therefore, no command usage prompt is displayed. As a pre-processor, it only eats JavaScript code from stdin, and then pulls the processed code from stdout. As for file operations, you can use the pipeline feature of unix command lines.

To popularize this, we need to put files, such as in. js when stdin is input to the jsdev program, use the less than symbol <, such as jsdev <in. js, and the output is bigger than the symbol>: jsdev <in. js> out. js. To try jsdev, you only need to use jsdev <in. js to output the result to the screen for easy display, or you can even use the echo command to test simple single-line code. For example, echo "/* tag 'stuff' */" | jsdev tag

Only run jsdev <in. js> out. the js command does not apply to in. js has any changes. We need to call the jsdev command with tag as the parameter to specify the tag to be enabled. Multiple spaces are separated by spaces. For example, if the in. js code is as follows:

 
 

  
  
/*hello console.log('Hello, World!')*/ 
  
  
/*hi console.log('Hi, there.')*/ 
 
 

Then jsdev <in. js hello will output the following code:

 
 

  
  
{console.log('Hello, World!')}  
  
  
/*hi console.log('Hi, there.')*/ 
 
 

While jsdev <in. js hello hi is:

 
 

  
  
{console.log('Hello, World!')}  
  
  
{console.log('Hi, there.')} 
 
 

Curly braces are added to avoid association with other parts of the program. The main problem is that JavaScript has the design of automatically inserting semicolons at the end of a line. If the context is separated without curly braces, it may be associated with the front and back rows, such as function calls in the previous row. In fact, curly braces combine multiple statements into one statement. The most common difference is that they are used after the if statement accepts only the keywords of one statement. Curly braces in JavaScript do not generate a namespace.

You can specify a function name for the tag, so the comment block specified by this tag will be a bit like JSONP by this function name wrap), as shown in. js:

 
 

  
  
/*log some_variable*/ 
 
 

Run the command jsdev <in. js log: console. log to output:

 
 

  
  
{console.log(some_variable);} 
 
 

This can be used to print some variable values in the current State during code debugging, which is more convenient.

You can also specify conditions for the comment block, as shown in. js below:

 
 

  
  
var name = 'Yuest' 
  
  
/*hello console.log('Hello, World!')*/ 
  
  
/*hello(name === 'Celine') console.log('Hello, Celine!')*/ 
 
 

Run the command jsdev <in. js hello output:

 
 

  
  
var name = 'Yuest' 
  
  
{console.log('Hello, World!')}  
  
  
if (name === 'Celine') {console.log('Hello, Celine!')} 
 
 

If you run this code, it is clear that only Hello, World! Will be output !.

The specified functions and conditions can also be used at the same time, for example:

 
 

  
  
var name = 'Yuest' 
  
  
/*log 'Hello, World!'*/ 
  
  
/*log(name === 'Ling') 'Hello, Ling!'*/ 
 
 

Run the command jsdev <in. js log: console. log to output:

 
 

  
  
var name = 'Yuest' 
  
  
{console.log('Hello, World!');}  
  
  
if (name === 'Ling') {console.log('Hello, Ling!');} 
 
 

It is almost the same as the previous one, but the comments are much shorter. The above is everything about how to use JSDev. In fact, the most important form is/* <tag> <stuff> */. We can simply use this form to achieve the same purpose:

 
 

  
  
var name = 'Yuest' 
  
  
/*hello console.log('Hello, World!')*/ 
  
  
/*hello if (name === 'Ling') {console.log('Hello, Ling!')}*/ 
 
 

The above Code uses the command jsdev <in. js hello output:

 
 

  
  
var name = 'Yuest' 
  
  
{console.log('Hello, World!')}  
  
  
{if (name === 'Ling') {console.log('Hello, Ling!')}} 
 
 

Therefore, it can be seen that specifying function names and conditions for tags is only simplified.

By the way, I forgot to run the jsdev command to accept a-comment parameter to add comments to the output file header. For example, for the above in. js file, run the following command:

 
 

  
  
jsdev <in.js hello -comment "Author: Yuest" -comment "This is a temporary file generated by JSDev" 
 
 

You will get:

 
 

  
  
// Author: Yuest  
  
  
// This is a temporary file generated by JSDev  
  
  
var name = 'Yuest' 
  
  
{console.log('Hello, World!')}  
  
  
{if (name === 'Ling') {console.log('Hello, Ling!')}} 
 
 

Well, the above is really about the usage of JSDev, and about how to make good use of it, his user needs a little imagination. For example, you can write some bash scripts or something. The following describes the JavaScript version of JSDev and the methods I have come up with for using the node project.

JavaScript version and node usage

The old-mentioned jsdev. js defines only one JSDEV function and accepts three parameters. The first parameter is the source code to be processed, and the second and third parameters are two arrays, respectively specifying tags and comments. If the last command above is processed using the JavaScript version, it should be:

 
 

  
  
JSDEV( input  
  
  
     , ['hello']  
  
  
     , ['Author: Yuest', 'This is a temporary file generated by JSDev']) 
 
 

My fork has added exports. JSDEV = JSDEV to node and publish to npm. You only need to add the jsdev dependency to npm install jsdev or package. json, and add the JSDEV dependency to the source code.

 
 

  
  
var JSDEV = require('jsdev').JSDEV 
 
 

You can use the JavaScript version of JSDEV () function.

Because node can modify module. constructor. prototype. _ compile to modify the file to be loaded, it is very suitable to apply the JSDev Preprocessor. My idea is to describe the comments under which tags should be opened in a file. It should also be described in its own annotations. If the program loads jsdev and calls its replaceRequire method require ('jsdev '). replaceRequire (). Then, if the file to be entered by require contains comments such as // @ jsdev tag1 tag2, the comments block specified by tag1 and tag2 will be enabled with jsdev.

Specify the rule for enabling tags to write as follows:

 
 

  
  
//@jsdev(test,production) tag1 tag2  
  
  
//@jsdev(development) tag3 
 
 

The above annotation line indicates that the tag1 tag2 annotation block of this file is enabled when the environment variable NODE_ENV = test or NODE_ENV = production is enabled, and the tag3 annotation block is enabled when NODE_ENV = development. Without the brackets after jsdev, the default value is development. Therefore, you can write

 
 

  
  
//@jsdev(test,production) tag1 tag2  
  
  
//@jsdev tag3 
 
 

For example, a. js:

 
 

  
  
require('jsdev').replaceRequire()  
  
  
require('./b') 
 
 

B. js:

 
 

  
  
//@jsdev(test,production) hello  
  
  
//@jsdev hi  
  
  
/*hello console.log('hello')*/ 
  
  
/*hi console.log('hi')*/ 
 
 

Then Running node a. js will output hi, while running NODE_ENV = test will output hello

In addition, the same is true for front-end development. With the replaceStatic () function, you can replace the static middleware of connect/express. In this way, the JavaScript files returned to the browser through static middleware can be preprocessed. The rules for enabling tags in the file are the same as those previously written. Note that you must call replaceStatic () before using connect. static (root ().

For more examples, refer to the test I wrote. In the exported code,./runtests, of course, make sure that the npm dependency has been installed, that is, run npm install in the directory) to run the test. I am here to provide the usage of this very common tool. It depends on the user's imagination to make good use of its environment and set the tag.

If you have any shortcomings, you are welcome to testify. You can go to github to raise issue.

Original article: http://club.cnodejs.org/topic/4f3b65a1b43c3c846a05518c