VScode：ES6 & Nodejs & webpack & babel
Posted 轮回路上打碟的小年轻
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了VScode：ES6 & Nodejs & webpack & babel相关的知识，希望对你有一定的参考价值。
目录
前言
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:UsersAdministratorDesktop est>cnpm install webpack -g
C:UsersAdministratorDesktop est>cnpm install webpack-cli -g
3.2 环境配置
3.2.1 配置package.json
1）项目初始化
C:UsersAdministratorDesktop est>npm init2）编辑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:UsersAdministratorDesktop est>webpack
C:UsersAdministratorDesktop est>"node" "E:
odejs
ode_global
ode_moduleswebpackinwebpack.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/_html-webpack-plugin@3.2.0@html-webpack-plugin/lib/loader.js!./src/index.html] 482 bytes {0} [built]
[./node_modules/_webpack@4.41.5@webpack/buildin/global.js] (webpack)/buildin/global.js 472 bytes {0} [built]
[./node_modules/_webpack@4.41.5@webpack/buildin/module.js] (webpack)/buildin/module.js 497 bytes {0} [built]
+ 1 hidden module4 项目执行
4.1 依赖安装
1）babel系列
# 安装babel-core
C:UsersAdministratorDesktop est>npm install @babel/core --save-dev
# 安装转码规则，新版本安装babel-preset-env，老版本提示安装babel-preset-es2015
C:UsersAdministratorDesktop est>npm install @babel/preset-env --save-dev
# 安装react
C:UsersAdministratorDesktop est>npm install @babel/preset-react --save-dev
# 安装babel-loader
C:UsersAdministratorDesktop est>npm install babel-loader --save-dev2）webpack系列
# 安装html-webpack-plugin
C:UsersAdministratorDesktop est>npm install html-webpack-plugin --save-dev
# 安装clean-webpack-plugin
C:UsersAdministratorDesktop est>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:UsersAdministratorDesktop est>npm run build
> llw@1.0.0 build C:UsersAdministratorDesktop est
> webpack --config webpack.config.js --colors --display-reasons --watch
C:UsersAdministratorDesktop est>"node" "C:UsersAdministratorDesktop est
ode_modules.bin..\_webpack@4.41.5@webpackinwebpack.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:UsersAdministratorDesktop estsrc 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/_html-webpack-plugin@3.2.0@html-webpack-plugin/lib/loader.js!./src/index.html] 341 bytes {0} [built]
single entry C:UsersAdministratorDesktop est
ode_modules\_html-webpack-plugin@3.2.0@html-webpack-pluginlibloader.js!C:UsersAdministratorDesktop estsrcindex.html
[./node_modules/_webpack@4.41.5@webpack/buildin/global.js] (webpack)/buildin/global.js 472 bytes {0} [built]
cjs require global [./node_modules/_lodash@4.17.15@lodash/lodash.js] 1:0-57
[./node_modules/_webpack@4.41.5@webpack/buildin/module.js] (webpack)/buildin/module.js 497 bytes {0} [built]
cjs require module [./node_modules/_lodash@4.17.15@lodash/lodash.js] 1:0-57
+ 1 hidden module4.2.2 webpack-dev-server热加载
C:UsersAdministratorDesktop est>npm start
> llw@1.0.0 start C:UsersAdministratorDesktop est
> webpack-dev-server --mode development --open --hot
C:UsersAdministratorDesktop est>"node" "C:UsersAdministratorDesktop est
ode_modules.bin..\_webpack-dev-server@3.10.1@webpack-dev-serverinwebpack-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:UsersAdministratorDesktop est
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/_webpack-dev-server@3.10.1@webpack-dev-server/client?http://localhost:8080 (webpack)/hot/dev-server.js ./src 52 bytes {main} [built]
[./node_modules/_strip-ansi@3.0.1@strip-ansi/index.js] 161 bytes {main} [built]
[./node_modules/_webpack-dev-server@3.10.1@webpack-dev-server/client/index.js?http://localhost:8080] ./node_modules/_webpack-dev-server@3.10.1@webpack-dev-server/client?http://localhost:8080 4.29 KiB {main} [built]
[./node_modules/_webpack-dev-server@3.10.1@webpack-dev-server/client/overlay.js] 3.51 KiB {main} [built]
[./node_modules/_webpack-dev-server@3.10.1@webpack-dev-server/client/socket.js] 1.53 KiB {main} [built]
[./node_modules/_webpack-dev-server@3.10.1@webpack-dev-server/client/utils/createSocketUrl.js] 2.91 KiB {main} [built]
[./node_modules/_webpack-dev-server@3.10.1@webpack-dev-server/client/utils/log.js] 964 bytes {main} [built]
[./node_modules/_webpack-dev-server@3.10.1@webpack-dev-server/client/utils/reloadApp.js] 1.59 KiB {main} [built]
[./node_modules/_webpack-dev-server@3.10.1@webpack-dev-server/client/utils/sendMessage.js] 402 bytes {main} [built]
[./node_modules/_webpack@4.41.5@webpack/hot/dev-server.js] (webpack)/hot/dev-server.js 1.59 KiB {main} [built]
[./node_modules/_webpack@4.41.5@webpack/hot/emitter.js] (webpack)/hot/emitter.js 75 bytes {main} [built]
[./node_modules/_webpack@4.41.5@webpack/hot/log-apply-result.js] (webpack)/hot/log-apply-result.js 1.27 KiB {main} [built]
[./node_modules/_webpack@4.41.5@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/_html-webpack-plugin@3.2.0@html-webpack-plugin/lib/loader.js!./src/index.html] 341 bytes {0} [built]
[./node_modules/_lodash@4.17.15@lodash/lodash.js] 528 KiB {0} [built]
[./node_modules/_webpack@4.41.5@webpack/buildin/global.js] (webpack)/buildin/global.js 472 bytes {0} [built]
[./node_modules/_webpack@4.41.5@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）babel-core、babel-preset-env、babel-preset-react与 @babel/core、@babel/preset-env、@babel/preset-react之间的区别？
7.0版本后包名默认为@label
3）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映射文件
6 参考资料
以上是关于VScode：ES6 & Nodejs & webpack & babel的主要内容，如果未能解决你的问题，请参考以下文章