[WEBPACK] Một cách phân biệt khi bundle ra es5 hay es6 một ví dụ sử dụng webpack (ok)

Đọc thêm:

public Method (y)

// Global module
var myModule = (function ( jQ, _ ) {
 
    function privateMethod1(){
        jQ(".container").html("test");
    }
 
    function privateMethod2(){
      console.log( _.min([10, 5, 100, 2, 1000]) );
    }
 
    return{
        publicMethod: function(){
            privateMethod1();
        }
    };
 
// Pull in jQuery and Underscore
})( jQuery, _ );
myModule.publicMethod();

C:\xampp\htdocs\webpack-demo\src\index.js

class Car {
  constructor(name, year) {
    this.name = name;
    this.year = year;
  }
}
var myCar = new Car("Ford", 2014);
document.getElementById("demo").innerHTML = myCar.name + " " + myCar.year;

C:\xampp\htdocs\webpack-demo\index.html

  <!DOCTYPE html>
  <html lang="en">
  <head>
  	<meta charset="UTF-8">
  	<meta name="viewport" content="width=device-width, initial-scale=1.0">
  	<title>Document</title>
  </head>
  <body>
    <div id="demo">Demo</div>
    <script src="dist/main.js"></script>
  </body>
  </html>

C:\xampp\htdocs\webpack-demo\package.json

{
  "name": "webpack-demo",
  "version": "1.0.0",
  "description": "",
  "private": true,
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --mode production"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^5.17.0",
    "webpack-cli": "^4.4.0"
  },
  "dependencies": {
    "babel-preset-es2015": "^6.24.1",
    "lodash": "^4.17.20"
  }
}

C:\xampp\htdocs\webpack-demo\dist\main.js

Với Es5

const path = require('path');
module.exports = {
  entry: './src/index.js',
  target: ['web', 'es5'],
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist')
  }
};

! function() {
    var e = new class {
        constructor(e, n) {
            this.name = e, this.year = n
        }
    }("Ford", 2014);
    document.getElementById("demo").innerHTML = e.name + " " + e.year
}();

Với Es6

const path = require('path');
module.exports = {
  entry: './src/index.js',
  target: ['web', 'es6'],
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist')
  }
};

(() => {
    var e = new class {
        constructor(e, n) {
            this.name = e, this.year = n
        }
    }("Ford", 2014);
    document.getElementById("demo").innerHTML = e.name + " " + e.year
})();

Xem lại cách viết này đều là giống nhau chi tiết đọc

https://app.gitbook.com/@javascriptuse/s/advanced/what-does-function-in-javascript-mean-ok

! function(){}() && (() => {})()

Previouswhat does !function in Javascript mean? (ok)NextJavascript Self Invoking Functions (ok)

Last updated 3 years ago

// Global module var myModule = (function ( jQ, _ ) { function privateMethod1(){ jQ(".container").html("test"); } function privateMethod2(){ console.log( _.min([10, 5, 100, 2, 1000]) ); } return{ publicMethod: function(){ privateMethod1(); } }; // Pull in jQuery and Underscore })( jQuery, _ ); myModule.publicMethod();

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="demo">Demo</div> <script src="dist/main.js"></script> </body> </html>

{ "name": "webpack-demo", "version": "1.0.0", "description": "", "private": true, "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "build": "webpack --mode production" }, "keywords": [], "author": "", "license": "ISC", "devDependencies": { "webpack": "^5.17.0", "webpack-cli": "^4.4.0" }, "dependencies": { "babel-preset-es2015": "^6.24.1", "lodash": "^4.17.20" } }

! function() { var e = new class { constructor(e, n) { this.name = e, this.year = n } }("Ford", 2014); document.getElementById("demo").innerHTML = e.name + " " + e.year }();

(() => { var e = new class { constructor(e, n) { this.name = e, this.year = n } }("Ford", 2014); document.getElementById("demo").innerHTML = e.name + " " + e.year })();