Front end summary series
- Front End Summary, Foundation Paper and CSS (1) Layout
- Front-end Summary, Foundation Chapter, CSS (2) Vision
- Front-end Summary, Foundation Chapter and CSS (3) Supplement
- Front End Summary, Foundation Chapter, JS (1) Prototype, Prototype Chain, Constructor and String
- Front End Summary, Foundation Chapter, JS (2) Deep Copy of Arrays, Deduplication and String Inversion and Array
- Front End Summary, Foundation Paper, JS(3) arguments, callee, call, apply, bind and function encapsulation and constructor
- Front-end Summary, Tool Chapter and Management (I) Common Modularization Scheme
I. Modularization Specification
1.1 AMD Specification (Asynchronous Module Definition)
1.2 CMD Specification (Common Module Definition)
1.3 Common JS specification (NodeJS modularization scheme)
1.4 ES6 module (need to use babel transcoding)
2. Packaging Modules with Webpack
2.1 Installation of Webpack
2.2 What are all exported modules?
2.3 Packaging JS Modules
2.4 Easier Packing
2.5 Packaging CSS Modules
I. Modularization Specification
1.1 AMD Specification (Asynchronous Module Definition)
The implementation of AMD specification includes RequireJS The following is a complete example.
index.html
---------------
<!DOCTYPE html>
<html>
<head>
<title></title>
<!-- Introduce require.js -->
<script type="text/javascript" src="http://cdn.bootcss.com/require.js/2.3.3/require.js
"></script>
</head>
<body>
<script type="text/javascript" src="main.js"></script>
</body>
</html>
myName.js
---------------
// Definition module
define('myName',[],function () {
return 'My name is white.'
})
yourName.js
---------------
// Definition module
define('yourName',[],function () {
return 'Your name is lily.'
})
main.js
---------------
// Call module
require(['myName','yourName'],function (myName,yourName) {
console.log(myName)
console.log(yourName)
})
1.2 CMD Specification (Common Module Definition)
The implementation of AMD specification includes SeaJS Here is an example.
define(function(require, exports, module) {
var $ = require('jquery'); // Import module
var Spinning = require('./spinning');
exports.doSomething = ...
module.exports = ... // Export module
})
1.3 Common JS specification (NodeJS modularization scheme)
The Common JS specification is mainly used for NodeJS, and here is an example.
require('./test'); // Import modules in the current directory
require('jquery'); // Import modules in module directory
module.exports = {} // Export module
1.4 ES6 module (need to use babel transcoding)
The ES6 module needs to use babel transcoding. Here is an example.
import './test'; // Import modules in the current directory
import 'jquery'; // Import modules in module directory
export function test() {} // Export module
2. Packaging Modules with Webpack
JS files can be modularized directly using Common JS grammar or ES6 (which requires babel transcoding). CSS, pictures and other resources need to be modularized with corresponding Loader s.
2.1 Installation of Webpack
- - D is equivalent to - save-dev, - S is equivalent to - save. The former is stored in dependencies of npm configuration file (package.json), while the latter is stored in devDependencies.
npm init -y // Generate npm configuration file npm install webpack -D // Installing Webpack
2.2 What are all exported modules?
The output can be a string, an object, or a function. It can also be other JS data types. But each file can only export one module.
yourName.js
---------------
var str = 'Your name is lily.'
module.exports = str // Export module
main.js
---------------
var yourName = require('./yourName') // Import module
console.log(yourName) // Test exported modules
//Let's modify the data types of module.exports in yourName.js, and then enter the node main.js instruction for testing.
yourName.js(Each file can only export one module. Please test it one by one.
---------------
module.exports = 'hello' // Export string |'hello'
module.exports = {a:1,b:2} // Export object |{a: 1, b: 2}
module.exports = function () { // Derived function | [Function]
console.log('hello')
}
main.js(The corresponding invocation method is as follows.
---------------
var yourName = require('./yourName')
console.log(yourName) // 'hello'
console.log(yourName.a) // 1
console.log(yourName()) // 'hello'
2.3 Packaging JS Modules
Create the following files in the same directory. There is no content in all.js, which is used to place packaged modules. Both myName.js and yourName.js export content, and main.js imports both files. The main.js and imported modules are packaged into all.js by webpack main.js all.js instructions.
index.html
---------------
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<!-- Be-all JS All packaged to all.js -->
<script type="text/javascript" src="all.js"></script>
</body>
</html>
myName.js
---------------
var str = 'My name is white.' // Define variables
module.exports = str // output module
yourName.js
---------------
var str = 'Your name is lily.'
module.exports = str
main.js
---------------
var myName = require('./myName') // Import module (current directory to use. /)
var yourName = require('./yourName')
console.log(myName) // Test the imported module
console.log(yourName) //
webpack main.js all.js // Packaging instructions (files on the left are packaged on the right)
2.4 Easier Packing
The above way, every time you have to input the source files, and packaged files, it is really very troublesome. You can configure the following files to enter webpack instructions to package files.
webpack.config
---------------
var webpack = require('webpack')
module.exports = {
entry: './main.js',
output: {
path: __dirname,
filename: 'all.js'
}
}
2.5 Packaging CSS Modules
Packaging CSS modules requires configuring Loader.
// Install CSS Loader
npm install css-loader style-loader
// Configure CSS Loader
module: {
loaders: [
{css: /\.css$/, loader: 'style-loader!css-loader'}
]
}
webpack.config.js(Webpack Configuration file)
---------------------
var webpack = require('webpack')
module.exports = {
entry: './main.js',
output: {
path: __dirname,
filename: 'all.js'
},
module: {
loaders: [
{test: /\.css$/, loader: 'style-loader!css-loader'}
]
}
}
summary
The article mainly refers to the following websites
Blogs are a little slower and will continue to grow. The blog is a semi-abstract and semi-summary, with links to the original text, which refers to more content. If you mind, you are welcome to trust me personally. Although a series of articles were written, they were not completely original. But over this period of time, I really feel I have learned a lot. Knowledge is gradually systematized and will not be as scattered as before. Fighting.
The next summary is asynchronous.