JS modular specification

1.CommJS

  • NPM init generates a package.json file

  • Higher versions of NodeJS automatically convert package names to lowercase

  • npm install uniq –save
    • Add this dependency to package.json, which defaults to –save in NPM version 5 and above
  • Exposes methods or properties in a module

  • You can run the file from Node app.js to see the result (server-side implementation)

  • Introducing third-party libraries
Const uniq = require('uniq') // There is a slight problem. The result returned by calling uniq is sorted by the first digit encodingCopy the code

Browserify Modular Tutorial (CommJS browser-side packaging Tool)

  • Global installation
npm installl browserify -g
Copy the code
  • Local installation
npm install browserify --save-dev
Copy the code

DevDependencies are different from dependencies where you develop dependencies and run dependencies

  • When it runs on the browser side, it says require is not defined and browserify is needed to package it

    Browserify js/ SRC /app.js -o js/dist/bundle.jsCopy the code

  • The final index page introduces what is essentially a bundled bundle.js file

2.AMD (Asynchronous loading)

  • Defining exposure modules

    • Define modules that have no dependencies
    Define (function(){return module})Copy the code
    • A module that defines dependencies is displayed declaring dependency injection
    Define (['module1','module2'],function(m1,m2)) {return module})Copy the code

  • Instance (without AMD syntax)

  • Module A depends on module B. When invoking module A in app.js, it is necessary to introduce module B first, then module A, and app.js finally

  • Using AMD syntax

  • Jquery encounters AMD syntax to expose module names in lower case

3.CMD (define AMD, expose CommonJS)

  • Define modules that have no dependencies
define(function(require,exports,module){
  let msg = 'module2'
  function bar() {
    console.log(msg);
  }
  module.exports = bar
})
Copy the code
  • Define modules with dependencies
Define (function(require,exports,module){let MSG = 'module4' // let module2 = require('./module2') module2( Async ('./module3',function(m3) {m3.module3.fun()}) function fun2() {console.log(MSG); } exports.fun2 = fun2 })Copy the code

  • Using in a browser

    <script type='text/javascript' src="./node_modules/sea.js/sea.js"></script>
<script type='text/javascript'>
	seajs.use('./modules/main.js')
</script>
Copy the code

4.ES6-Babel-Browserify

  • Install Babel – cli
npm install babel-cli -g
Copy the code
  • Install Babel – preset – es2015
npm install babel-preset-es2015 --save-dev
npm install babel-preset-env
Copy the code
  • Define the.babelrc file

  • Exposure module mode (conventional exposure)

    • Exposure, respectively,

  • Uniform exposure

  • Default exposure (can expose any data type, what data is exposed is received
Export default ()=>{console.log(' arrow function '); } // import myFun from './module3'Copy the code
  • Introducing additional modules (object deconstruction assignment)

  • Compile ES6 to ES5 code using Babel (including CommonJS syntax)
babel js/src -d js/build
Copy the code
  • Compile and package files using Browserify (folders will not be generated automatically, you will need to create them manually)
browserify js/build/main.js -o js/dist/bundle.js
Copy the code

Corresponding exercise code address: gitee.com/Lee_sparkli…