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

其他 2020-01-13 18:50:50 阅读次数: 0

目录

前言

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）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

  1. --mode 开发模式
  2. --open 打开浏览器
  3. --hot 热加载
  4. --inline 自动刷新

webpack

  1. --config webpack.config.js 使用配置文件
  2. --colors 添加颜色
  3. --progress 显示进度条
  4. --display-reasons 显示情形
  5. --watch 监听变动并自动打包
  6. -p 压缩混淆脚本
  7. -d 生成map映射文件

6 参考资料

  1. ECMAScript 6入门
  2. Webpack傻瓜式指南
  3. 详解Webpack + ES6 最新环境搭建与配置
  4. react+webpack+es6实现Hello World

猜你喜欢

转载自www.cnblogs.com/UncleLivin/p/12188705.html
今日推荐
基于大语言模型的开源知识库问答系统 MaxKB GitHub Star 数量突破 5,000 个！
美国拟限制 AI 大模型出口中国和俄罗斯
苹果将与 OpenAI 达成协议，将 ChatGPT 应用于 iPhone
openKylin 社区生态委员会第六次会议圆满召开
阿里云正式发布通义千问 2.5
Python 3.13 发布首个 Beta：实验性自由线程模式和 JIT、改进交互式解释器
Stack Overflow 拿我的代码去训练 AI 大模型，还封了我的账号
Pop!_OS 的 COSMIC 桌面完成 App Store 上架工作
报告：Django 仍然是 74% 开发者的首选
《2024 年一季度互联网投融资运行情况》研究报告
15 年前上了“FFmpeg 耻辱柱”，今天他还得谢谢咱——腾讯QQPlayer一雪前耻？
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
周排行
BPM为企业带来的实际利益
好程序员web前端分享css常用属性缩写
Java文件下载（excel）
css样式的动态添加及显示和隐藏等零碎用法
axios全局配置以及拦截器
使用Logstash来实时同步MySQL和log日志数据到ES
C++获取当前时间（年月日、时分秒、毫秒）
Odoo产品分析 (四) -- 工具板块(11) -- 网站即时聊天(1)
Java环境配置正确，但是java、javac、java -version均返回“不是内部或外部命令，也不是可运行的程序或批处理文件”？
01 官网下载各种CentOS教程（超详细版）
每日归档
更多
2024-05-14(0)
2024-05-13(18)
2024-05-12(0)
2024-05-11(38)
2024-05-10(38)
2024-05-09(35)
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022