前言

ES6 主要是爲了解決 ES5 的先天不足，JavaScript 歷史版本一直沒有模塊（module）體系，無法將一個大程序拆分成互相依賴的小文件，再用簡單的方法拼裝起來。

插件	版本
@babel/core	7.7.7
@babel/preset-env	7.7.7
@babel/preset-react	7.7.4
babel-loader	8.0.6
html-webpack-plugin	3.2.0
webpack	4.41.5
webpack-cli	3.3.10
webpack-dev-server	3.10.1

1 VScode配置安裝

自行前往VScode官網下載，並按提示進行安裝。

2 Nodejs配置安裝

自行前往nodejs官網下載，並按提示進行安裝。

3 VScode調試ES6

3.1 擴展插件安裝

3.1.1 VScode插件

3.1.2 npm插件

若遇本地網絡不善，可自行前往npm官網下載相關插件。

# 全局安裝webpack和webpack-cli
C:\Users\Administrator\Desktop\test>cnpm install webpack -g
C:\Users\Administrator\Desktop\test>cnpm install webpack-cli -g

3.2 環境配置

3.2.1 配置`package.json`

1）項目初始化

C:\Users\Administrator\Desktop\test>npm init

2）編輯package.json

{
  "name": "llw",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    // create mode "build" and "start" 
    "build": "webpack --config webpack.config.js --colors  --display-reasons --watch",
    "start": "webpack-dev-server --mode development --open --hot",
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^8.0.6",
    "babel-preset-env": "^1.7.0",
    "clean-webpack-plugin": "^3.0.0",
    "html-webpack-plugin": "^3.2.0",
    "webpack": "^4.41.5"
  }
}

3.2.2 配置`webpack.config.js`

const path = require('path');
const HtmlwebpackPlugin = require('html-webpack-plugin');

module.exports = {
  // development爲開發模式，production爲生產模式
  mode: "development", 
  // 入口文件，不指定路徑則默認查找index.js
  entry: path.resolve(__dirname, './src/raytrace.js'),
  // 輸出文件
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, 'build')
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/, 
        use:[{
            loader: "babel-loader",
            options:{
            presets:["@babel/preset-env","@babel/preset-react"]
            }
        }]
      }
    ]
  },
  // 自動生成html文件
  plugins: [
    new HtmlwebpackPlugin({
    // 指定網頁標題
    // title: 'test'
    // 從模板添加
    template: './src/index.html'
    })
  ],
  // 配置開發服務器，使得瀏覽器同步刷新
  devServer: {
    historyApiFallback: true,
    hot: true,
    inline: true,
    progress: true,
  }
};

3.2.3 配置`index.js`和`index.html`

1）編輯index.js

class Main {
  constructor() {
   document.write("This is my test project!");
   console.info("This is my test project!");
  }
}
new Main();

2）編輯index.html

<!DOCTYPE html>
<html>
<head>
	<meta charset='utf-8'>
	<title>test</title>
</head>
<body>
</body>
</html>

3.2.4 項目打包

C:\Users\Administrator\Desktop\test>webpack

C:\Users\Administrator\Desktop\test>"node"  "E:\nodejs\node_global\\node_modules\webpack\bin\webpack.js"  
Hash: 0290ecd3c50c9f00a7c2
Version: webpack 4.41.5
Time: 1267ms
Built at: 2020-01-01 1:28:21 PM
     Asset       Size  Chunks             Chunk Names
 bundle.js   10.8 KiB    main  [emitted]  main
index.html  300 bytes          [emitted]  
Entrypoint main = bundle.js
[./src/raytrace.js] 6.64 KiB {main} [built]
Child html-webpack-plugin for "index.html":
     1 asset
    Entrypoint undefined = index.html
    [./node_modules/[email protected]@html-webpack-plugin/lib/loader.js!./src/index.html] 482 bytes {0} [built]
    [./node_modules/[email protected]@webpack/buildin/global.js] (webpack)/buildin/global.js 472 bytes {0} [built]
    [./node_modules/[email protected]@webpack/buildin/module.js] (webpack)/buildin/module.js 497 bytes {0} [built]
        + 1 hidden module

4 項目執行

4.1 依賴安裝

1）babel系列

# 安裝babel-core
C:\Users\Administrator\Desktop\test>npm install @babel/core --save-dev

# 安裝轉碼規則，新版本安裝babel-preset-env，老版本提示安裝babel-preset-es2015
C:\Users\Administrator\Desktop\test>npm install @babel/preset-env --save-dev

# 安裝react
C:\Users\Administrator\Desktop\test>npm install @babel/preset-react --save-dev

# 安裝babel-loader
C:\Users\Administrator\Desktop\test>npm install babel-loader --save-dev

2）webpack系列

# 安裝html-webpack-plugin
C:\Users\Administrator\Desktop\test>npm install html-webpack-plugin --save-dev

# 安裝clean-webpack-plugin
C:\Users\Administrator\Desktop\test>npm install clean-webpack-plugin --save-dev

npm install packagename --save-dev可以簡化爲npm i packagename -s -d，也可以 npm install packagename1 packagename2 packagename3 ...... packagenameN --save-dev同時安裝多個包

4.2 項目運行

4.2.1 `webpack`項目打包

C:\Users\Administrator\Desktop\test>npm run build

> [email protected] build C:\Users\Administrator\Desktop\test
> webpack --config webpack.config.js --colors  --display-reasons --watch


C:\Users\Administrator\Desktop\test>"node"  "C:\Users\Administrator\Desktop\test\node_modules\.bin\\..\[email protected]@webpack\bin\webpack.js" --config webpack.config.js --colors  --display-reasons --watch

webpack is watching the files…

Hash: 0a2382ea3e2ed6e90ab8
Version: webpack 4.41.5
Time: 1039ms
Built at: 2020-01-01 4:08:25 PM
     Asset       Size  Chunks             Chunk Names
 bundle.js   4.42 KiB    main  [emitted]  main
index.html  169 bytes          [emitted]  
Entrypoint main = bundle.js
[./src/index.js] 165 bytes {main} [built]
    single entry C:\Users\Administrator\Desktop\test\src  main
[./src/sub.js] 201 bytes {main} [built]
    cjs require ./sub [./src/index.js] 1:10-26
Child html-webpack-plugin for "index.html":
     1 asset
    Entrypoint undefined = index.html
    [./node_modules/[email protected]@html-webpack-plugin/lib/loader.js!./src/index.html] 341 bytes {0} [built]
        single entry C:\Users\Administrator\Desktop\test\node_modules\[email protected]@html-webpack-plugin\lib\loader.js!C:\Users\Administrator\Desktop\test\src\index.html 
    [./node_modules/[email protected]@webpack/buildin/global.js] (webpack)/buildin/global.js 472 bytes {0} [built]
        cjs require global [./node_modules/[email protected]@lodash/lodash.js] 1:0-57
    [./node_modules/[email protected]@webpack/buildin/module.js] (webpack)/buildin/module.js 497 bytes {0} [built]
        cjs require module [./node_modules/[email protected]@lodash/lodash.js] 1:0-57
        + 1 hidden module

4.2.2 `webpack-dev-server`熱加載

C:\Users\Administrator\Desktop\test>npm start

> [email protected] start C:\Users\Administrator\Desktop\test
> webpack-dev-server --mode development --open --hot


C:\Users\Administrator\Desktop\test>"node"  "C:\Users\Administrator\Desktop\test\node_modules\.bin\\..\[email protected]@webpack-dev-server\bin\webpack-dev-server.js" --mode development --open --hot
10% building 1/1 modules 0 activei ｢wds｣: Project is running at http://localhost:8080/
i ｢wds｣: webpack output is served from /
i ｢wds｣: Content not from webpack is served from C:\Users\Administrator\Desktop\test
i ｢wds｣: 404s will fallback to /index.html
i ｢wdm｣: Hash: ded3a094a76a02ed0af1
Version: webpack 4.41.5
Time: 1466ms
Built at: 2020-01-01 5:10:48 PM
     Asset       Size  Chunks             Chunk Names
 bundle.js    395 KiB    main  [emitted]  main
index.html  169 bytes          [emitted]  
Entrypoint main = bundle.js
[0] multi ./node_modules/[email protected]@webpack-dev-server/client?http://localhost:8080 (webpack)/hot/dev-server.js ./src 52 bytes {main} [built]
[./node_modules/[email protected]@strip-ansi/index.js] 161 bytes {main} [built]
[./node_modules/[email protected]@webpack-dev-server/client/index.js?http://localhost:8080] ./node_modules/[email protected]@webpack-dev-server/client?http://localhost:8080 4.29 KiB {main} [built]
[./node_modules/[email protected]@webpack-dev-server/client/overlay.js] 3.51 KiB {main} [built]
[./node_modules/[email protected]@webpack-dev-server/client/socket.js] 1.53 KiB {main} [built]
[./node_modules/[email protected]@webpack-dev-server/client/utils/createSocketUrl.js] 2.91 KiB {main} [built]
[./node_modules/[email protected]@webpack-dev-server/client/utils/log.js] 964 bytes {main} [built]
[./node_modules/[email protected]@webpack-dev-server/client/utils/reloadApp.js] 1.59 KiB {main} [built]
[./node_modules/[email protected]@webpack-dev-server/client/utils/sendMessage.js] 402 bytes {main} [built]
[./node_modules/[email protected]@webpack/hot/dev-server.js] (webpack)/hot/dev-server.js 1.59 KiB {main} [built]
[./node_modules/[email protected]@webpack/hot/emitter.js] (webpack)/hot/emitter.js 75 bytes {main} [built]
[./node_modules/[email protected]@webpack/hot/log-apply-result.js] (webpack)/hot/log-apply-result.js 1.27 KiB {main} [built]
[./node_modules/[email protected]@webpack/hot/log.js] (webpack)/hot/log.js 1.34 KiB {main} [built]
[./node_modules/webpack/hot sync ^\.\/log$] ./node_modules/webpack/hot sync nonrecursive ^\.\/log$ 170 bytes {main} [built]
[./src/index.js] 165 bytes {main} [built]
    + 21 hidden modules
Child html-webpack-plugin for "index.html":
     1 asset
    Entrypoint undefined = index.html
    [./node_modules/[email protected]@html-webpack-plugin/lib/loader.js!./src/index.html] 341 bytes {0} [built]
    [./node_modules/[email protected]@lodash/lodash.js] 528 KiB {0} [built]
    [./node_modules/[email protected]@webpack/buildin/global.js] (webpack)/buildin/global.js 472 bytes {0} [built]
    [./node_modules/[email protected]@webpack/buildin/module.js] (webpack)/buildin/module.js 497 bytes {0} [built]
i ｢wdm｣: Compiled successfully.

5 踩坑指南

1）npm全局安裝和局部安裝區別？

全局安裝npm install packagename -g將包置於安裝目錄的node_modules文件中
局部安裝npm install packagename --save-dev是將安裝包版本信息寫入package.json文件的devDependencies字段，npm install packagename --save寫入devdependencies字段，兩者都存在於指定項目的node_modules文件中

2）npm中--save、-S、--save-dev、-D區別？

--save和-S一致，將依賴寫入dependencies，既生產階段的依賴。
--save-dev和-D一致，將依賴寫入devDependencies，既開發階段的依賴。

備註：es6需要藉助babel轉換爲es5，僅開發階段需要，項目運行期間不再需要，因此babel使用npm install babel -D進行安裝。

3）babel-core、babel-preset-env、babel-preset-react與 @babel/core、@babel/preset-env、@babel/preset-react之間的區別？

7.0版本後包名默認爲@label

4）webpack-dev-server和webpack執行參數？

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack-dev-server --mode development --open --hot --inline",
    "build": "webpack --config webpack.config.js --colors  --progress  --display-reasons --watch -p -d"
  },

webpack-dev-server

–mode 開發模式
–open 打開瀏覽器
–hot 熱加載
–inline 自動刷新

webpack

–config webpack.config.js 使用配置文件
–colors 添加顏色
–progress 顯示進度條
–display-reasons 顯示情形
–watch 監聽變動並自動打包
-p 壓縮混淆腳本
-d 生成map映射文件

VScode（二）：ES6 & Nodejs & webpack & babel

目錄

前言

1 VScode配置安裝

2 Nodejs配置安裝

3 VScode調試ES6

3.1 擴展插件安裝

3.1.1 VScode插件

3.1.2 npm插件

3.2 環境配置

3.2.1 配置`package.json`

3.2.2 配置`webpack.config.js`

3.2.3 配置`index.js`和`index.html`

3.2.4 項目打包

4 項目執行

4.1 依賴安裝

4.2 項目運行

4.2.1 `webpack`項目打包

4.2.2 `webpack-dev-server`熱加載

5 踩坑指南

6 參考資料

工作中用到的腳本合集

微服務實踐Aspire項目發佈到遠程k8s集羣

通過f-string編寫簡潔高效的Python格式化輸出代碼

[轉帖]20個常用的Linux工具命令

[轉帖]PostgreSQL從小白到高手教程 - 第46講：poc-tpch測試

24-5-18 X

GIS Experience （十二）：OSM數據獲取

VScode（二）：ES6 & Nodejs & webpack & babel

GIS Experience （六）：QGIS安裝及使用教程

Front-End（一）：Vue項目構建及運行（Nodejs + IDEA + VScode）

GIS Experience （五）：ArcGIS Enterprise 10.6 （Windows）安裝及部署圖解

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結

VScode（二）：ES6 & Nodejs & webpack & babel

目錄

前言

1 VScode配置安裝

2 Nodejs配置安裝

3 VScode調試ES6

3.1 擴展插件安裝

3.1.1 VScode插件

3.1.2 npm插件

3.2 環境配置

3.2.1 配置package.json

3.2.2 配置webpack.config.js

3.2.3 配置index.js和index.html

3.2.4 項目打包

4 項目執行

4.1 依賴安裝

4.2 項目運行

4.2.1 webpack項目打包

4.2.2 webpack-dev-server熱加載

5 踩坑指南

6 參考資料

3.2.1 配置`package.json`

3.2.2 配置`webpack.config.js`

3.2.3 配置`index.js`和`index.html`

4.2.1 `webpack`項目打包

4.2.2 `webpack-dev-server`熱加載