An Incomplete Guide to JavaScript Toolchain

Overview

As the JavaScript language becomes increasingly powerful, the development tools that support it are also booming. Today's front-end web projects are no longer just about writing a few HTML pages and adding some CSS and JS. Any practical project may require the use of some frameworks and third-party libraries, as well as corresponding scaffolding, dependency package management, precompilation, build packaging, compression and merging and other tools. It is almost impossible to complete these tasks purely manually.

Science and technology are the primary productive forces, and tools are one of their manifestations. If you want to do your work well, you must first sharpen your tools. Since tools have liberated manpower, we should embrace them. This article summarizes a series of tools around JavaScript and sees which tools are needed for a common project.

Static type checking

JavaScript itself is a dynamic scripting language and is weakly typed. That is, there is no data type checking at compile time, and the type can only be determined at runtime. The advantages are that it is more flexible, easier to learn, and requires less code. The disadvantage is also obvious, that is, bugs are easy to appear if you are not careful, especially in large projects. If there are no development specifications and developers are allowed to play freely, maintenance will be a disaster. To make up for this shortcoming, some languages ​​with their own type systems that can be translated into JavaScript have emerged.

Flow: A static type checking system for JavaScript written in OCaml, produced by Facebook. It supports type system, type annotation, can define library, and provides code lint, etc. Vue.js 2.x is written in Flow. However, Vue 3.0 uses another statically typed language, TypeScript.

TypeScript: TypeScript is a language developed by Microsoft, which is a superset of JavaScript and can be compiled into JavaScript. TypeScript is becoming more and more popular and has been recognized by a large number of projects.

Code style check (Linter)

Due to the characteristics of JavaScript dynamic language, it is too flexible in writing, which often leads to different code styles in projects where multiple people collaborate, causing a lot of trouble for maintenance and expansion. In addition, some language features are prone to bugs and are generally not recommended in best practices. Therefore, code linting tools come in handy. It can not only check the code writing format, but also check for low-level errors such as referencing undefined variables.

There have been many kinds of Lint tools, such as JSLint, JSHint, StandardJS, JSCS, etc. Now there is a trend of unification, and basically everyone uses ESLint.

When you first start using the Lint tool, you may not be used to it because it has too many restrictions and often gives warnings and errors. But in the long run, it is still necessary to introduce Linter into JavaScript projects.

Package Manager

The reason why JavaScript can flourish is largely because the technology ecosystem is very prosperous and there are all kinds of third-party libraries. Such a huge collection of third-party libraries will inevitably require a management platform to be responsible for the hosting, version management, download and installation, and dependency management of third-party packages.

npm: The most popular JavaScript package manager. Based on Node.js, including websites and CLI, the total number of packages above exceeds 1 million, basically covering all aspects required for JavaScript projects.

Yarn: A package manager launched by Facebook in 2016, compatible with the npm registry, focusing on the speed, security and determinism of the CLI.

Bower: It was once quite popular and was used to manage front-end JavaScript packages, because npm only supported package management in the node environment. As npm and yarn support both node and browser package management, bower has gradually faded into history.

pnpm: Only one copy of a certain version of a module is saved on the hard disk through hard links, which can be shared among multiple projects, thus saving a lot of hard disk space and speeding up module installation.

Module Loader

In the early days of JavaScript, there was no language-level modularization support, which made dependency management of large projects very inconvenient. Problems such as variable name conflicts, global variable pollution, and module loading order are more prominent. There have been various modularization schemes, such as CommonJS Modules (CJS), Asynchronous Module Definition (AMD), and Universal Module Definition (UMD). Since 2015, ES6 has supported modularization at the language level, namely ECMAScript Modules (ESM).

In addition to the common JavaScript module formats mentioned above, there are also System.register or global modules, as well as some non-JavaScript modules, such as JSON modules, CSS modules, Web Assembly, etc.

A module loader is a tool that loads and processes the various types of module codes mentioned above, which can be synchronous, asynchronous, static, or dynamic. Usually, a module is placed in a separate file and imported via some directives. When a project has dozens or hundreds of modules, how to ensure the order in which they are loaded and executed becomes a problem. Don't worry, the module loader will take care of the dependencies for you.

RequireJS: implements AMD module loading, mainly used on the browser side, and can also be used in Node.

SystemJS: A dynamic module loader that can load all types of JavaScript modules, even non-JavaScript modules, for browsers and Node.

StealJS: Can load modules in ESM, ADM and CJS formats.

ES Module Loader: A module loader implemented by browsers and available in Node.js with the --experimental-modules flag.

The above module loaders load and execute code at runtime. Do not confuse it with the various loaders in the build tools, which are tools that perform preprocessing at build time and only do some format conversion.

Packaging Tools

An actual production project usually does not publish the source code directly to the server. Instead, various modules and static resources are integrated through some tools, and the final generated code may be completely different from the source code. This is what packaging tools are for. The more common packaging tools are:

Webpack: It can be said to be the most popular bundler and is almost the standard configuration for most projects. It can only recognize JavaScript and JSON files, but its architectural design provides unlimited possibilities. It can process any type of resources through various loaders, and can optimize packaging results and perform resource management, inject environment variables, etc. through plug-ins. Its build targets can also be customized based on the platform, such as browser, Node.js, web worker, Electron, etc.

Rollup: It is also an excellent packager that supports the output of library and application. Its biggest selling point is that it supports ES modules by default and has implemented the tree-shaking function very early. It also has plug-in and hook functions, and is relatively customizable.

Parcel: A rising star in the tool world, it is known as a "zero-configuration* bundler. If you have ever been troubled by the cumbersome configuration of Webpack, it may attract you.

Browserify: A narrower bundler specifically designed to transform Node.js packages so they can run in a browser. It uses the same module system as Node.js. Some modules are only used on the Node platform and can be used on the browser through its conversion. It can only process pure JavaScript modules and is usually used in conjunction with Gulp.

Metro: A React Native-specific packager that uses an entry file and various configurations to create a single JavaScript file containing all code and dependencies.

Task Management Tool (Task Runner)

Task Runner automates various repetitive actions required for a project, such as:

• CSS Preprocessors (Less, Sass)
• CSS automatically adds new attribute prefixes (Autoprefixer)
• Optimize images
• Combine and compress JavaScript files
• Monitor file changes and automatically execute tasks

The more mainstream task managers are Grunt and Gulp, and Webpack is also one.

Grunt: A command line tool that can complete many complex tasks through sophisticated configuration and rich plug-ins.

Gulp: Unlike Grunt, Gulp uses a streaming pipeline to combine multiple tasks. The temporary results between tasks are stored in memory, which makes the execution efficiency much higher.

Webpack: It's you again, Webpack. Task management is only part of the powerful features of Webpack. Different plug-ins are used to perform personalized tasks at different stages of the build.

If you think the above task managers are overkill, you can also use bash scripts, npm scripts or Makefile to implement some simple task management according to the actual situation.

Translator

The role of a JavaScript transpiler is to translate non-JavaScript languages ​​(TypeScript, CoffeeScript, LiveScript, etc.) or different versions of JavaScript (ES6, ES7, ES8, etc.) into equivalent code that meets the requirements of the target platform (compatibility, variable obfuscation, strict mode, etc.).

Most transpilers use an Abstract Syntax Tree (AST) as an intermediate format when processing source code and performing code optimization. AST gradually splits and parses the source code into a tree structure with metadata:

Code --(parse)-->AST--(transform)-->AST--(generate)-->Code

Babel is the current mainstream JavaScript transpiler. Its tool chain system is mainly used to translate JavaScript versions above ES6 into code that is backward compatible with browsers. Babel can convert syntax, provide support for features missing from the target platform, convert source code, etc.

With Babel, we can use new language features as early as possible without worrying about whether the target browsers support them.

Build Tools

Construction is actually a comprehensive concept, which includes multiple steps such as module packaging, source code translation, and task management. There are various build tools for other languages ​​and platforms, such as Make, Gradle, Ant, Maven, Rake or MSBuild. Among them, Make is the most common general-purpose build tool, usually used in C language, but it can also be used to build JavaScript projects.

For a JavaScript toolchain, the build target could be an npm package, a website, a Node server, an RN app, an Electron app, and so on. Some tasks can be accomplished with specialized tools, but building is a complex process that often requires the use of a combination of multiple tools.

For example, Build can use tools such as Buck, Bazel, Lerna, etc. to manage multiple modules at the same time and implement incremental Build (only rebuild the modified modules to improve efficiency). Grunt and Gulp are used for task management, and Webpack, Rollup, Parcel, Browserify, etc. are used for module bundling.

Debugging Tools

A debugger is essential during the development process, as it allows you to track and view running code in Node.js and in the browser. It usually provides functions such as breakpoints, single-step execution, monitoring variables, and viewing memory and CPU usage.

Chrome DevTools: The developer tools that come with the Chrome browser are the best browser development tools available today (no doubt about it). Its functions are so powerful and its uses are so numerous that a book could be written on it.

node-inspector: An early tool for debugging Node.js code. It is now rarely used because Node.js has a built-in debugger based on DevTools.

VS Code: Another great debugging tool with a built-in Node.js debugger. It can also debug TypeScript and other languages ​​that can be translated into JavaScript.

Node Process Manager

The Node process manager is used to manage running Node applications. Provides high availability, automatic restart, file monitoring, performance and resource monitoring, and clustering functions.

Forever: As the name suggests, its function is to keep the Node.js program running forever. It is a simple command line tool that comes in handy for small Node.js applications.

PM2: A Node.js process management tool for production environments, with built-in load balancing, automatic restart, logging, monitoring, and cluster management functions.

StrongLoop Process Manager (Strong-PM): Similar to PM2, it can also be used for Node.js process management in production environments and has multi-host deployment capabilities.

In addition, SystemD is the default process manager in Linux systems, which can be used to run Node.js applications as services.

Project Scaffolding

As the complexity of the project increases, the steps to create a new project become more and more cumbersome, and a lot of configuration work may need to be repeated. At this time, project scaffolding is needed. Many frameworks provide scaffolding tools, such as Vue.js has Vue CLI, Angular has Angular CLI, React has create-react-app, etc. There are also general-purpose scaffolds, Yeoman being the most popular one.

• Quickly create a new project
• Creating a module or package
• Start a new service
• Unified coding style, best practices, etc.
• Project promotion, allowing users to quickly get started with the sample app

The above is a brief discussion of the details of the Incomplete Guide to the JavaScript Tool Chain. For more information about the Incomplete Guide to the JS Tool Chain, please pay attention to other related articles on 123WORDPRESS.COM!