A, NPM

1.1 What is NPM?

NPM is a dependency management tool used by Node.js, similar to Maven, to manage project dependencies in a unified manner. NPM is installed by default when we install Node.js.

If you want to generate a package.json file directly, you can use the NPM init -y commandCopy the code

1.2, package. Json

Package. json is similar to Maven’s pom.xml and is used to annotate the dependencies and versions we need.

1.3. Modify an NPM Mirror

Since the NPM repository is not in The country, like Maven, some images in the country are needed to speed up the download.

npm config set registry https://registry.npm.taobao.org 

Copy the code

1.4, NPM install

  • Use NPM install to install the latest version of the dependency package,
  • Module installation location: project directory \node_modules
  • The installation automatically adds a package-lock-json file to the project directory, which helps lock the version of the installation package
  • In the package.json file, the dependencies are added under the dependencies node, similar to < dependencies> in Maven.

Second, the Babel

2.1 What is Babel?

  • Some of ES6’s advanced syntax doesn’t work in a browser environment or even a Node.js environment.
  • Babel is a widely used transcoder that converts ES6 code into ES5 code for execution in an existing environment. This means that you can write programs in ES6 right now without worrying about whether your existing environment supports it.

2.2 Babel installation

NPM install -g Babel -cli # Check whether Babel --version is installed successfullyCopy the code

2.3 Use of Babel

The Babel configuration file is. Babelrc and is stored in the root directory of the project. This file is used to set transcoding rules and plug-ins.

{
    "presets": [],
    "plugins": []
}
Copy the code

The presets field sets the transcoding rules, adding es2015 rules to.babelrc:

{
    "presets": ["es2015"],
    "plugins": []
}
Copy the code

Install the transcoder in the project:

NPM install --save-dev babel-preset- ES2015 # NPM install --save-dev CSV-loader XML -loader # Write the result of transcoding to a file mkdir dist1 # The --out-file or -o argument specifies the output file Babel SRC /example.js --out-file dist1/compiled. Js # or Babel SRC /example.js -o Mkdir dist2 # --out-dir or -d specifies the output directory Babel SRC --out-dir dist2 # or Babel SRC -d dist2Copy the code

2.4 Custom Scripts

{/ /... "scripts": { // ... "build": "babel src\\example.js -o dist\\compiled.js" }, } mkdir dist npm run buildCopy the code

Third, modular development

3.1 What is modular development

As websites have become “Internet applications”, the Javascript code embedded in web pages has grown larger and more complex.

Javascript modular programming has become an urgent need. Ideally, developers only need to implement the core business logic, and everything else can load modules that others have already written. However, Javascript is not a modular programming language. It does not support concepts such as “classes”, “packages” and “modules”.

3.2 Two specifications for modular development

  • CommonJS modularity specification
  • ES6 modularity specification

3.2.1 commonjs

CommonJS uses exports and require to export and import modules.

The following defines the JS file for a utility class

// Define a member:  const sum = function(a,b){ return a + b } const subtract = function(a,b){ return a - b } const multiply = function(a,b){ return a * b } const divide = function(a,b){ return a / b }Copy the code

Export js

Module. Exports = {sum, subtract, multiply, divide}Copy the code

Reference in another JS

// Introduce the module, note: Log (m) const r1 = m.sum(1,2) const r2 = m.subtract(1,2) console.log(r1,r2)Copy the code

3.2.2 ES6 specification

ES6 uses export and import to export and import modules.

  • export
Export function save() {console.log(' save ')} export function save() {console.log(' save ')}Copy the code
  • The import
Import {getList, save} from './ userapi.js' getList() save()Copy the code

Babel needs to be installed to run

1 configuration. Babelrc

{
    "presets": ["es2015"],
    "plugins": []
}
Copy the code

2 the installation

npm install --save-dev babel-preset-es2015
Copy the code

3 Define the following plug-ins in package.json

{/ /... "scripts": { "build": "babel src -d dist" } }Copy the code

4 Run the NPM run build command

Another ES6 specification export

Export default {getList() {console.log(' get data list 2')}, save() {console.log(' save data list 2')}}Copy the code

The import

import user from "./userApi2.js"
user.getList()
user.save()
Copy the code

The above notes are from the Mad God tutorial:www.kuangstudy.com/bbs/1351463…