Grilled One Piece front End Package Manager

Long time no article, the front-end hours have been blind busy, recently finally have free time to study under, today and everyone to share about the front end package manager of things, mainly the work of Bower and recently have been studying the browserify, Duo and the fast-outdated component for a brief introduction and contrast, are dry, I hope you do not spray. Cheer up, talk not much, start:

First, Bower

Bower is a package management tool launched by Twitter, based on Nodejs's modular thinking, the function is dispersed into various modules, so that there is a connection between modules and modules, through the Bower to manage this connection between modules, its main role is: for the module installation, upgrade and delete, Provides a unified, maintainable management model.

Package management tools typically have the following features:

· Registration mechanism: Each package needs to determine a unique ID that makes the search and download match correctly, so the package management tool needs to maintain the registration information and can rely on other platforms.

· File storage: Determine the location of the file, download the time can be found, of course, the address is accessible on the network.

· Upload download: This is the main function of the tool, can improve the convenience of the use of the package. For example, if you want to use jquery just install a bit, you don't have to look everywhere to download. Upload is not necessary, depending on the location of the file storage, but need to have a certain mechanism to protect.

· Dependency Analysis: This is one of the main problems of the package management tool, since there are links between the packages, then the download will need to deal with their dependencies. When downloading a package, you also need to download the dependent packages.

First, install Bower:

Here are some of the commands commonly used by Bower:

Then, using the Bower Install module, here are some examples:

The installation of Bower is essentially a download of the required modules and modules to the bower_components subdirectory of the current directory, which is usually automatically generated at installation, and can also be manually set Bower_ The storage path for the components directory, as shown in, add the. BOWERRC configuration file to the project as follows:

Once downloaded, you can insert the file directly into the Web page.

The Bower Update command is used to update the module:

If the module name is not given, all modules are updated.

The Bower Uninstall command is used to unload the module:

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

Second, browserify

The advent of browserify allows the Nodejs module to run in the browser, using the syntax format of the require () to organize the front-end code and load NPM modules. In the browser, call the Browserify compiled code, also written in the <script> tag.

The operation of Browserify is divided into 3 steps.

1. Write node program or module

2. Pre-compile into bundle.js with browserify

3. Load bundle.js in HTML page

Browserify Release page: http://browserify.org/

First, install Browserify:

The following are browserify common commands:

Then, write a server-side script that is the Nodejs file:

The script file is complete and can now be compiled with browserify:

">" to the left is the file to be compiled, the right is the compiled file, the path of the file can be specified by itself. When Browserify compiles, the modules that the script relies on are compiled together. This means that it can combine multiple modules into one file.

After compiling, insert the file directly into the page and invoke the compiled function on the page:

Open in the browser to see the effect:

Third, component

Component is the module manager developed by the author of the Express framework TJ Holowaychuk. The basic idea is to compile the various resources (scripts, stylesheets, pictures, fonts, etc.) needed by the Web page and put them in the same directory (the build directory by default).

First, install component

Common commands:

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

The Build.css and build.js in the above code are the target files that component will generate. Next, in the project root directory, create a new Component.json file as the project's configuration file.

In the above code, the original file that specifies the JavaScript script and style sheet is multiply.js and index.css two files, and the stylesheet relies on the normalize module (not less than the 3.0.0 version, but not higher than the 4.0 version). It is important to note that the format of the component module is "GitHub username/project name".

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

View the effect in the browser:

At compile time, component automatically uses Autoprefixer to add a browser prefix to the CSS properties. At present, component seems to be in a state of stop development, the code warehouse has not changed for nearly half a year, the official also recommended to use the next introduction of the duo.

Iv. Duo

Duo is developed on the basis of component, grammar and configuration files are basically generic, and draw on some features of browserify and go language, quite powerful and easy to use.

First, install duo.

Then, write a local file test-duo.js.

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

Next, compile the final script file.

The compiled file can be inserted directly into the Web page.

Duo can not only compile JavaScript, but also compile CSS. Here's what style.css.

At compile time, Duo automatically merges include.css into the same file as the current style sheet.

After compiling, insert the Web page.

View the effect in the browser:

Finish

PS: Hope that the majority of readers friends criticize the evidence, if necessary reprint please indicate the source.

Grilled One Piece front End Package Manager