Introduction to front-end module manager_html/css_WEB-ITnose

Modular structure has become the mainstream of website development.

The main task of making a website is no longer writing various functions yourself, but how to combine various different modules together.

The browser itself does not provide a module management mechanism. In order to call each module, sometimes a lot of script tags have to be added to the web page. This makes the web page bloated, difficult to maintain, and generates a large number of HTTP requests, which slows down the display speed and affects the user experience.

In order 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 each module, making the web page structure clear and reasonable. It is no exaggeration to say that all front-end JavaScript projects in the future should be developed in this way.

The earliest and most famous front-end module manager is none other than RequireJS. It uses AMD format and loads various modules asynchronously. For specific usage, please refer to the tutorial I wrote. The problem with Require.js is that the various parameter settings are too cumbersome, difficult to learn, and difficult to fully master. Moreover, in actual applications, it is often necessary to merge all modules on the server side and then load them uniformly, which adds a lot of workload.

Today, I introduce four other front-end module managers: Bower, Browserify, Component and Duo. Each of them has distinctive characteristics, which makes up for the shortcomings of Require.js very well, 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 explain what they are used for, so that readers can have a general impression and know that there are specific tools that can complete a certain kind of work. For detailed usage, please refer to their respective documentation.

Bower

The main function of Bower is to provide a unified and maintainable management model for the installation, upgrade and deletion of modules.

First, install Bower.

　　$ npm install -g bower

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

　　# 模块的名称　　$ bower install jquery　　# github用户名/项目名　　$ bower install jquery/jquery　　# git代码仓库地址　　$ bower install git://github.com/user/package.git　　# 模块网址　　$ bower install http://example.com/script.js

The so-called "installation" means downloading the module (and its dependent modules) to the bower_components subdirectory of the current directory. Once downloaded, it can be inserted directly into a web page.

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

The bower update command is used to update modules.

　　$ bower update jquery

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

The bower uninstall command is used to uninstall modules.

　　$ bower uninstall jquery

Note that by default, dependent modules will be uninstalled together. For example, if you uninstall jquery-ui, jquery will be uninstalled together, unless there are other modules that depend on jquery.

Browserify

Browserify itself is not a module manager, it just allows server-side CommonJS format modules to run on the browser side. This means that through it, we can use the npm module manager for Node.js. So, in fact, it indirectly provides the functionality of npm to the browser.

First, install Browserify.

　　$ npm install -g browserify

Then, write a server-side script.

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

The uniq module in the above code is in CommonJS format and cannot run in the browser. At this time, Browserify comes on the scene, compiling the above code into a browser script.

　　$ browserify robot.js > bundle.js

The generated bundle.js can be directly inserted into the web page.

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

When Browserify is compiled, the modules that the script depends on will be compiled together. This means, it can combine multiple modules into a single file.

　Component

　Component is a module manager developed by TJ Holowaychuk, the author of the Express framework. Its basic idea is to compile various resources (scripts, style sheets, pictures, fonts, etc.) required by the web page and put them in the same directory (the default is the build directory).

First, install Component.

　　$ npm install -g component@1.0.0-rc5

The reason why the above code needs to specify the Component version is because version 1.0 has not been officially released yet.

Then, create a new index.html in the project root directory.

　　<!DOCTYPE html>　　<html>　　  <head>　　    <title>Getting Started with Component</title>　　    <link rel="stylesheet" href="build/build.css">　　  </head>　　  <body>　　    <h1 id="Getting-Started-with-Component">Getting Started with Component</h1>　　    <p class="blink">Woo!</p> 　　   <script src="build/build.js"></script>　　  </body>　　</html>

The build.css and build.js in the above code are the target files to be generated by Component.

Next, create a new component.json file in 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 above code, the original files specifying the JavaScript script and style sheet are two files, index.js and index.css, and the style sheet relies on the normalize module (not lower than version 3.0.0, but no higher than version 4.0). It should be noted here that the format of the Component module is "github username/project name".

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

　　$ component build　　   installed : necolas/normalize.css@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 browser prefixes to CSS properties.

At present, Component seems to be in a state of discontinued development. The code repository has not been changed for nearly half a year. The official also recommends using the Duo introduced next.

Duo

　　Duo是在Component的基础上开发的，语法和配置文件基本通用，并且借鉴了Browserify和Go语言的一些特点，相当地强大和好用。

　　首先，安装Duo。

　　$ npm install -g duo

　　然后，编写一个本地文件index.js。

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

　　上面代码加载了uid和fmt两个模块，采用Component的"github用户名/项目名"格式。

　　接着，编译最终的脚本文件。

　　$ duo index.js > build.js

　　编译后的文件可以直接插入网页。

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

　　Duo不仅可以编译JavaScript，还可以编译CSS。

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

　　编译时，Duo自动将normalize.css和layout.css，与当前样式表合并成同一个文件。

　　$ duo index.css > build.css

　　编译后，插入网页即可。

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