Introduction to front-end module Manager

Introduction to front-end module Manager

Ruan Yifeng

The modular structure has become the mainstream of website development.

The main task of website creation is not to compile various functions, but to combine different modules.

The browser does not provide a module management mechanism. To call each module, you sometimes have to add a lot of SCRIPT tags to the webpage. In this way, the web page is bloated, difficult to maintain, and a large number of HTTP requests are generated, which slows down the display speed and affects the user experience.

To solve this problem, the front-end module Manager (package management) came into being. It can easily manage the dependencies of various JavaScript scripts and automatically load various modules to make the webpage structure clear and reasonable. To put it bluntly, the futureAllFront-end JavaScript projects should be developed in this way.

The earliest and most famous front-end module manager does not belong to requirejs. It uses amd format and asynchronously loads various modules. For detailed usage, refer to the tutorial I wrote. The problem with require. JS is that parameter settings are too cumbersome, difficult to learn, and difficult to fully master. In addition, in actual applications, it is often necessary to merge all modules on the server side and load them in a unified manner, which requires a lot of work.

Today, I will introduce four other front-end module managers: Bower, browserify, component, and duo. Each of them has distinctive characteristics, which makes up for the defects of require. js and is a powerful tool for front-end development.

It should be noted that this article is not a tutorial for these four module managers. I just want to use the simplest examples to illustrate what they are for. This gives readers a general impression that a job can be completed with specific tools. For detailed usage, you also need to refer to their respective documents.

Bower

Bower provides a unified and maintainable management mode for module installation, upgrade, and deletion.

First, install Bower.

　　$ npm install -g bower

Then, use the bower install command to install various modules. The following are some examples.

# Module name $ Bower install jquery # GitHub user name/project name $ Bower install jquery/jquery # git code repository address $ Bower install git: // github.com/user/package.git # module URL $ Bower install http://example.com/script.js

The so-called "installation" means to download this module (and its dependent modules) to the bower_components subdirectory in the current directory. After the download, you can directly Insert the webpage.

　　<script src="/bower_componets/jquery/dist/jquery.min.js">

The Bower update command is used to update the module.

　　$ bower update jquery

If no module name is provided, all modules are updated.

The Bower uninstall command is used to uninstall the module.

　　$ bower uninstall jquery

Note: by default, modules that are dependent on are detached together. For example, if jquery-UI is uninstalled, it will be detached together with jquery unless other modules depend on jquery.

Browserify

Browserify is not a module manager, but a module in the commonjs format on the server can run on the browser. This means that we can use node. js's NPM module manager. Therefore, in fact, it is equivalent to indirectly providing the NPM function for the browser.

First, install browserify.

　　$ npm install -g browserify

Then, write a server script.

　　var uniq = require(‘uniq‘);　　var nums = [ 5, 2, 1, 3, 2, 5, 4, 2, 0, 1 ];　　console.log(uniq(nums));

In the code above, the uniq module is in commonjs format and cannot be run in a browser. At this time, browserify is on the stage and the above Code is compiled as a browser script.

　　$ browserify robot.js > bundle.js

The generated bundle. js can be directly inserted into the webpage.

　　<script src="bundle.js"></script>

When browserify is compiled, the module on which the script depends is compiled together. This means that it can combine multiple modules into one file.

Component

Component is the module Manager developed by corner stone holowaychuk, creator of the express framework. The basic idea is to compile the various resources (scripts, style sheets, images, fonts, etc.) required by the web page and put them in the same directory (build directory by default ).

First, install component.

　　$ npm install -g [email protected]1.0.0-rc5

The above Code specifies the component version because version 1.0 has not been officially released.

Then, create an index.html file under the project root directory.

　　<!DOCTYPE html>　　

Build.css and build. js in component code are the target files to be generated by component.

Next, create a component. JSON file under the project root directory as the project configuration file.

　　{　　  "name": "getting-started-with-component",　　  "dependencies": {　　    "necolas/normalize.css": "^3.0.0"　　  },　　  "scripts": ["index.js"],　　  "styles": ["index.css"]　　}

In the authorization code, it indicates that the initial criptscript and the original file of the sample table are two files: index.js and index.css, and the style sheet depends on the normalize module (not earlier than version 3.0.0, but not later than version 4.0 ). Note that the format of the component module is "GitHub user name/project name ".

Finally, run the component build command to compile the file.

　　$ component build　　   installed : necolas/normalize[email protected]3.0.1 in 267ms　　       build : resolved in 1221ms　　       build : files in 12ms　　       build : build/build.js in 76ms - 1kb　　       build : build/build.css in 80ms - 7kb

During compilation, component automatically uses autoprefixer to add the browser prefix to the CSS attribute.

Currently, component seems to be in the stopped development status. The code repository has not changed for nearly half a year. We recommend that you use duo in the next section.

Duo

Duo is developed on the basis of component. Its syntax and configuration files are basically common. It also draws on some features of browserify and go languages and is quite powerful and easy to use.

First, install duo.

　　$ npm install -g duo

Then, compile a local file index. js.

　　var uid = require(‘matthewmueller/uid‘);　　var fmt = require(‘yields/fmt‘);　　　　var msg = fmt(‘Your unique ID is %s!‘, uid());　　window.alert(msg);

The above code loads UID and FMT modules, using the component "GitHub username/project name" format.

Next, compile the final script file.

　　$ duo index.js > build.js

The compiled file can be directly inserted into the webpage.

　　<script src="build.js"></script>

Duo can not only compile JavaScript, but also compile CSS.

　　@import ‘necolas/normalize.css‘;　　@import ‘./layout/layout.css‘;　　　　body {　　  color: teal;　　  background: url(‘./background-image.jpg‘);　　}

During compilation, duoautomatically combines normalize.css and layout.css with the current style table into the same file.

　　$ duo index.css > build.css

After compilation, insert the webpage.

　　<link rel="stylesheet" href="build.css">

(End)

Introduction to front-end module Manager