node. js command in--------------------------------node app Prompt and node. js---------------------------------------• After installing node. js, there are two bootable apps: the black node. js command Prompt and the green node. JS• The black node. js command Prompt is the same as the CMD DOS console, and when the Node-v is entered, the node's version number appears, indicating that the current node environment is installed OK. • When you enter the node command and enter the JS encoding environment, you can write the JS code directly. Exit the JS encoding environment when entering. Exit. • If the NPM version number appears after entering Npm-v, then node. JS has integrated the NPM Package manager.
• In the green node. js, just like node. js command Prompt input node into the JS encoding environment, you can write the JS code directly. node. js cannot enter the NODE-V name because it is the JS encoding environment itself.
--------------------------------Module Specification: CommonJS, AMD, CMD, ES6 module---------------------------------------• Modular Role: ① Implementation of JS file asynchronous loading, to avoid the browser suspended animation. ② dependencies between management modules for easy module Maintenance
· CommonJS:Node.js is the CommonJS specification followed by the exports output module, Require Introduction module, detailed usage see node. JS Chapter.
· AMD: Because the Commonjs Introduction module is introduced synchronously, blocking occurs when the module is too large. So the COMMONJS applies only to the backend, and the front end is the AMD (Asynchronous module definition) specification. And Require.js is the specific implementation of the AMD specification. Specific usage:require ([' Modulea ', ' Moduleb ', ' Modulec '], function (Modulea, Moduleb, Modulec) {//Some code here });
The require () function accepts two parameters. The first parameter is an array that represents the dependent module, the example above is [' Modulea ', ' Moduleb ', ' modulec ', i.e. the main module relies on these three modules; The second parameter is a callback function, which is called when the module specified by the current polygon is loaded successfully. The loaded module passes in the function as a parameter, allowing the modules to be used inside the callback function. require () asynchronously loads Modulea,moduleb and Modulec, the browser does not lose its response; it specifies a callback function that only the preceding modules will run after they are successfully loaded, resolving the dependency problem. If there is no dependency, define a simple module, the following is OK://Math.jsdefine (function () {var add = function (x, y) {return x+y;};return {Add:add};});load as follows://main.jsrequire ([' Math ', function (math) {alert (Math.add ());}])
· Cmd:cmd is also an asynchronous loading module, and the only difference with AMD is the timing of the dependent module execution is different. Specifically: AMD is dependent on the front, start loading all dependencies, JS can easily know who the dependent module is, immediately load, and the CMD is dependent on the nearest, need to use the module when the define loaded in, more in line with AMD logical order. Many people think that the proximity of CMD needs to change the module into a string to understand the dependencies of those modules, which will affect performance, but in fact, the impact on performance is very small, but can provide logical convenience for development. the development sea.js of the domestic great god Yuber is the concrete realization of the CMD.
· ES6:ES6 implements the module function at the language standard level, can replace the CommonJS, AMD and the CMD specification, becomes the browser and the server Common module solution. the module functions are composed of two commands: Export and import. The Export command is used to specify the external interface of the module, and the Import command is used to enter functionality provided by other modules.
----------------------------------------------node. js------------------------------------------------------ • According to the COMMONJS specification, a single file is a module that require used to load a module, exports used to expose methods or properties in the module externally. Example://hello.js→ file 1 (module name 1)function say (username) {→ The method defined in the file console.log (' Hello, ' +username); }
Exports.say = Shuo; → Exposes the Say method name in the file to the Shuo method, and other files can be accessed directly.
///main.js→ File 2 (module name 2) var person = require ('./hello '); → load module 1,person equivalent to Java classPerson.shuo (' Wenzi '); → Output Hello, WenziPerson.shuo (' Division less '); → Output Hello, division less soldiersPerson.shuo (' NUC '); → Output Hello, NUC
the node module can be divided into core modules, local modules, and third-party modules installed through NPM (Node package Manager).
• Summary:node cancels the default global scope of JavaScript and instead uses the Commonjs module system, so you can better groupyour code, so you avoid a lot of security issues and bugs. You can use the Require function to load core modules, third-partymodules, or load your own modules from files and directories you can also load non-core modules with relative paths or absolute paths, such asThe module is placed in the Node_modules directory or for modules installed with NPM, you can also use the module name to load directly. Address: http://www.jb51.net/article/53808.htm
load path for require:①/.../.../.../xxx.js represents an absolute path②./xxx.js = relative path (xxx.js under the same folder)③. /indicates the previous level of the directory④ If neither add/.../、.. /do not Add./Then the module is either a core module, or it is loaded from a Node_modules folder.
---------------------------------------Front-end package management tool: NPM-------------------------------------------------NPM is actually the package Manager for node. js. Why do we need a package management tool? Because we developed it on node. js, we used a lot of JavaScript code written by someone else. If we want to use someone else to write a package, each time according to the name of the official website search, download code, decompression, re-use, very cumbersome. So a centralized management of the tool came into being: we all put their own modules into the development of the NPM online, if you want to use, directly through the NPM installation can be directly used, no tube code exists where, should be downloaded from. More importantly, if we want to use module A, and module A is dependent on module B, module B also relies on module X and module y,npm to download and manage all dependent packages based on dependencies. Otherwise, by our own manual management, must be both troublesome and error prone.
the NPM installation dependency package is divided into 2 methods:① Global Installation: NPM install gulp-g or npm install gulp--global② Local Installation: NPM Install Gulp or npm Install gulp--save-dev, etc., The meaning of the parameter--save-dev is that it represents writing your installation package information to the Devdependencies field of the Package.json file.
• The difference between a global installation and a local installation:Global: You can use NPM root-g to view the global installation directory, typically under C:\Users\Administrator\node_modules. Users can run the commands supported by the component package directly on the command line. Local: Place the installation package under./node_modules (the directory where NPM is running, you can adjust the directory by using the CD command). A locally installed package is introduced via require (). Note: The principle of NPM is probably to look up from the current directory, to find which directory has node_modules think this is the real project directory, so everything to the inside of it. So you have to make sure that you start from your current directory until the root directory has no node_modules,npm. Normal "To put things in the current directory. So the only way to install it locally is ①NPM root to find other folders that have Node_modules installed and then delete them. ② of course, you can also start with NPM Init and install locally. Advantages of Local installation: Each project can have a separate package, not affected by the global package, easy to move, copy, package, etc., to ensure the interdependence between different versions of the package. Additionally, the local installation package will load faster for the project. Disadvantages of Local installation: Each new project has to install the dependent packages locally, the installation package time is relatively long, one is that the package is too large to slow down the download, second, wasted hard disk space.
The Package.json is located in the module's directory and is used to define the properties of the package. Package.json Property Description:name-the package name. version-Number of the package. Description-Description of the package. Homepage-the website URL of the package. Author-The name of the author of the package. contributors-Other contributors ' names for the package. dependencies-List of dependent packages. If a dependent package is not installed, NPM will automatically install the dependent package in the Node_module directory. Repository-The type of place where the package code is stored can be git or svn,git available on Github. The main-main field is a module ID, which is a main item that points to your program. That is, if the name of your package is called Express, then the user installs it and then require ("Express"). keywords-keywords
npm Common commands:1. NPM Install <name>--savewhile installing, writing information to Package.json in the project path if there is a Package.json file, you can use the NPM install method directly to install all dependent packages based on the dependencies configuration, so that when the code is submitted to GitHub , you do not have to submit node_modules this folder. 2. NPM View Modulenames: View the Package.json folder of the node moduleNote: If you want to view the contents of a tag under the Package.json folder, you can use $NPM view modulename labelname3. NPM list: View the node packages that are already installed in the current directory. (NPM list-g: View all globally installed modules)Note: The node module search starts at the current directory where the code executes, and the search results depend on the content under Node_modules in the currently used directory. The NPM list parseable=true can be used in the form of a directory to present all node packages currently installed4. NPM Help: View the assistance commands5. NPM View moudlename dependencies: View package Dependencies6. NPM View ModuleName repository.url: View the source file address of the package7. NPM View ModuleName Engines: View the version of node on which the package depends8. NPM Help folders: View all the folders used by NPM9. NPM rebuild ModuleName: Rebuild after changing package contents10, NPM outdated: Check whether the package is obsolete, this command will list all the outdated packages, can be timely update the package11, NPM update modulename: Update node module12. NPM Uninstall Moudlename: uninstalling node Module13, a NPM package is a folder containing Package.json, Package.json describes the structure of this folder. Here's how to access NPM's JSON folder:$ NPM Help JSONThis command opens a Web page by default, and may not open as a Web page if you change the default open program. 14, when releasing a NPM package, you need to verify that a package name already exists$ npm Search PackageName15, NPM init: will guide you to create a Package.json file, including the name, version, the author of this information, etc.16. NPM Root: View the installation path for the current packageNPM root-g: View the installation path for a global package17. Npm-v: See the version of NPM installation
----------------------------------------Front-end build tool: Webpack------------------------------------------------ • When creating a front-end project, we often have the following requirements:compilation of ①sass,less,coffeescript,babel, etc.;② each push Master branch or NPM release should first run code style checks and unit tests;③ resource compression and merger;④ Browser automatically refresh;⑤ and so on. Manual completion of these inefficiencies, so the great God has developed grunt, gulp, Webpack and other building tools to automate these tasks. • Currently Webpack is the most powerful.
-----------------------------------------NPM+WEBPACK+ES6 Build Project------------------------------------------- • Since NPM and Webpack both rely on node. js, you need to install the node. JS Environment first.
NPM Installation: the node. JS installation will also be installed on the NPM,NPM is the package management tool, the project needs what package will be package down to the project, so NPM global installation, without the need to install in the project Webpack Installation: Webpack is recommended to be installed in both the project and the global. The role of global installation is directly used in the command line, installed in the project is to allow the project to have a separate package, not affected by the global package, easy to move, copy, package, etc., to ensure the interdependence between different versions of the package.
the core of the Webpack is the configuration webpack.config.js, which is the simplest of the following:module.exports = {entry:{firstwebpack:__dirname+ '/app/main.js '},//entry property is the main entry of the page, Firstwebpack is the key, and the colon is followed by a valueoutput: { //The file is packaged and placed in the file directory specified by the output property. path: __dirname+ '/build ',//Note: __dirname, is 2 underlinefilename: ' [name].bundle.js ' },module: { loaders: [{test:/\.css$/,loader: ' Style-loader!css-loader '}, {test:/\.scss$/,loader: "Style-loader!css-loader!sass-loader"}, //From right to left, first install sass, then CSS, then style. Css-loader is designed to traverse your css,style-loader to create a style tag.{test:/\.js$/,loader: ' Babel-loader '}, {test:/\. ( png|jpg) $/,loader: ' url-loader?limit=40000 '}]},watch:true,//each time the modification is saved Webpack.config.js The referenced file will be compiled automatically. };
• Supplement:$ webpack--config xxx.js//Use another configuration file (such as webpack.config2.js) to package$ webpack--watch//monitor changes and automatically pack$ webpack-p//Compression obfuscation script, this is very very important (greatly compressed space)$ webpack-d//Generate map Map file to tell which modules were eventually packaged
* Module loader, node. js, NPM, Webpack base Rollup
