** ・ High-level language ** High-level languages are programming languages designed to be easier for humans to understand than machines. In addition, "high-level" does not mean an excellent language, but means that it is possible to describe elements unique to the model and OS with a high degree of abstraction, and many languages used for developing application software Is classified as a high-level language, so the expression "high-level" is used.
** ・ Low-level language ** Languages that are easy for machines to recognize are called low-level languages. "Lower" does not mean that it is an inferior language, but that it is closer to hardware Therefore, the expression "low grade" is used.
To display the file in the browser, the machine recognizes it after developing it in a high-level language. You need to translate it into a low-level language that you can, and that translation is called ** compilation **.
The task of translating a programming language so that it can be understood by a working machine. Compiling is called a ** compiler (an opportunity-friendly programming language) ** It is done by the program. If there is a language that the compiler cannot recognize, you need to ** precompile ** it in a language that can be recognized in advance.
Ahead-of-time that allows the compiler to translate languages that it cannot translate. Alternatively, it refers to the pre-processing required for the main processing. In other words, the compilation that should be done before compiling or the main processing is precompiling.
For example, a web application precompiles a file written in a high-level language and then passes it to the browser so that the web browser can do the main process of reading and displaying the static file.
There is a mechanism called ** Asset Pipeline ** as a method for performing such precompilation.
It is a function that organizes static files called assets such as JavaScript and CSS into small pieces. The asset pipeline can also be added with the ability to precompile high-level languages, which can be applied to development using SCSS, TypeScript, etc.
The processing of the asset pipeline is performed in the flow of ** "(1) precompile", "(2) concatenation", "(3) compression", and "(4) placement" **.
After precompiling and concatenating multiple static files, compress and reduce the weight and place it in the public directory so that it can be passed to the browser.
Until now, Rails used the asset pipeline by Gem called ** Sprockets ** by default to precompile CSS, JavaScript, etc.
However, in recent years, it has become common to develop JavaScript library functions together, so Rails has started to precompile using ** module bundler ** from version 6 onwards.
Module Bundler is a tool for managing JavaScript modules while considering their dependencies.
A module is a group of processes that divides functions one by one so that they can be read from other files. In JavaScript, if you divide multiple functions into files, problems will occur when you combine them into one file, so in the Node.js environment, functions are handled in units called modules.
Modules allow you to split a large number of features into multiple files, and combine the split features into a single file that works fine. However, there is a problem that it cannot operate properly if there is a module that cannot be loaded due to the dependency created because it is divided into multiple modules.
The module bundler that manages modules in a batch is the solution to this problem. In recent years, ** webpack ** is becoming the mainstream among module bundlers.
webpack webpack is a tool for managing various JavaScripts required when creating a web application. There are four main things that webpack does.
| Basic elements | role |
|---|---|
| Entry | Decide which file to use as the reference (entry point) to resolve the dependency |
| Output | Specify where and what name to output (output) the file that is used as an entry point and organized by webpack. |
| Loaders | Read (load) the method of converting files such as CSS and HTML other than JavaScript into modules, and perform the specified process. |
| Plugins | Introduce and extend (plug-in) tasks such as compression that the loader cannot perform except by grouping files. |
In other words, by using webpack, it is possible to convert and compress the JavaScript library and various languages other than JavaScript, and then place it wherever you like.
It is possible to operate commands by introducing webpack to Rails, but since it is a little difficult to describe the configuration file, there is a gem called ** Webpacker ** that simplifies the setting.
Webpacker It is a Gem that makes webpack Rails specification and prepares a dedicated configuration file and helper method. From Rails version 6 and later, Webpacker is installed by default. Webpacker makes available JavaScript packages in addition to precompiling static files similar to the Sprockets asset pipeline.
Recommended Posts