Matching environment of ES6

Writing time ：2022 year 6 month 17 Japan

                              ES6 Matching environment 

stay Node.js Running in the environment ES6：
$ node
let sitename=“runoob”
undefined
console.log(sitename)
runoob
Undefined

Use the following command , You can see Node What has been achieved ES6 characteristic
node --v8-options | grep harmony.

webpack：

webpack It's a modern JavaScript Static module packager for applications (module bundler) . When webpack When processing an application , It recursively builds a dependency graph (dependency graph) , It contains each module required by the application , All these modules are then packaged into one or more bundle .
webpack There are four core concepts :
entrance (entry)
Output (output)
loader
plug-in unit (plugins)

entrance (entry)
The entrance will indicate webpack Which module should I use , As the start of building its internal dependency graph . After entering the starting point of the entrance ,webpack It will find out which modules and libraries are the starting points of the entrance （ Direct and indirect ） Rely on the . stay webpack There are many ways to define the middle portal , As the following example ：

Single entry （ Abbreviation ） grammar :

const config = {
entry: “./src/main.js”
}
Object syntax :

const config = {
app: “./src/main.js”,
vendors: “./src/vendors.js”
}
Output (output):

output Property will tell webpack Where to output it created bundles , And how to name these files , The default value is ./dist:

const config = {
entry: “./src/main.js”,
output: {
filename: “bundle.js”,
path: path.resolve(__dirname, ‘dist’)
}
}

loader:
loader Give Way webpack You can deal with those non JavaScript file （ webpack I only understand JavaScript ）.loader You can convert all types of files to webpack Modules that can be handled effectively , for example , Use... When developing ES6 , adopt loader take ES6 The grammar of is changed to ES5 , The following configuration ：

const config = {
entry: “./src/main.js”,
output: {
filename: “bundle.js”,
path: path.resolve(__dirname, ‘dist’)
},
module: {
rules: [
{
test: /.js$/,
exclude: /node_modules/,
loader: “babel-loader”,
options: [
presets: [“env”]
]
}
]
}
}

plug-in unit (plugins)
loader Used to convert certain types of modules , Plug ins can do more . Including packaging optimization 、 Compress 、 Define environment variables, etc . The plug-in is powerful , yes webpack Expansion is a very important tool , Can be used to handle a variety of tasks . Using a plug-in is also very easy , It only needs require() , Then add to plugins Array .

// adopt npm install
const HtmlWebpackPlugin = require(‘html-webpack-plugin’);
// For accessing built-in plug-ins
const webpack = require(‘webpack’);

const config = {
module: {
rules: [
{
test: /.js$/,
exclude: /node_modules/,
loader: “babel-loader”
}
]
},
plugins: [
new HtmlWebpackPlugin({template: ‘./src/index.html’})
]
};

gulp:
gulp It's a flow based automated build tool , Easy to use 、 Build fast 、 The plug-ins are of high quality and easy to learn , It is often used in lightweight engineering .

How to use ？
Global installation gulp:

$ npm install --global gulp
Introduce dependencies into the project :

$ npm install --save-dev gulp
Create a file named... Under the root directory of the project gulpfile.js The file of :

const gulp = require(‘gulp’);

// default Represents a task name , Perform the task by default
gulp.task(‘default’, function() {
// Place the default task code
})