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 参考资料

前言

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

原文地址：https://www.cnblogs.com/UncleLivin/p/12188705.html

时间： 2024-08-29 13:21:16

VScode（二）：ES6 & Nodejs & webpack & babel的相关文章

webpack+babel+ES6+react环境搭建

webpack+babel+ES6+react环境搭建 步骤: 1 创建项目结构 注意: 先创建一个项目目录  react  这个名字自定义,然后进入到这个目录下面 mkdir app //创建app目录 用来存放项目源文件 mkdir dist // 创建dist目录 用来存放打包好的文件 touch .gitignore //创建.gitignore 用来添加git 忽略的文件 touch webpack.config.js //创建webpack的配置文件 cd app //进入到app目

使用webpack+babel构建ES6语法运行环境

1.前言 由于ES6语法在各个浏览器上支持的情况各不相同,有的浏览器对ES6语法支持度较高,而有的浏览器支持较低,所以为了能够兼容大多数浏览器,我们在使用ES6语法时需要使用babel编译器将代码中的ES6语法编译为ES5语法,下面就开始搭建一个基于webpack+babel的ES6语法运行环境. 2.需要安装的包 搭建环境之前我们需要安装以下JS包: webpack(安装webpack,必装) babel-loader和babel-core(babel转码器,必装) babel-preset-

详解 Webpack+Babel+React 开发环境的搭建

1.认识Webpack 构建应用前我们先来了解一下Webpack, Webpack是一个模块打包工具,能够把各种文件(例如:ReactJS.Babel.Coffeescript.Less/Sass等)作为模块进行编译后进行打包. 2.安装Webpack 要开始使用Webpack在项目中进行开发前我们首先需要在全局环境中进行安装. npm install webpack -g 3.创建一个项目 安装好后创建一个名叫 learn-webpack 的项目并进入该项目文件夹,当然项目名字你可以起你自己想

重温 Webpack, Babel 和 React

开始之前 在书写文章之前,我假设大家已经有了 JavaScript,Node 包管理工具,Linux 终端操作 这些基本技能,接下来,我将一步一步指引大家从头搭建一个 React 项目 最终实现的效果 我们将使用 Webpack 和 Babel 搭建一个 React 应用,我们的目的很清晰,就是 更好的理解和掌握这些工具的使用 我们创建的应用程序既要做到 最小,也要遵循 最佳实践,为不是特别熟练的同学巩固一下基础 初始化 创建你的项目,并添加的你的配置文件 package.json mkdir

Ubuntu系统Jenkins+nodejs+webPack前端自动化部署

一.环境准备(java,maven,nodejs,webpack)环境部分略过总之缺什么依赖就apt什么[[email protected] ~]# tar zxvf jdk-8u91-linux-x64.tar.gz -C /opt/ [[email protected] ~]# tar xvf apache-maven-3.5.0-bin.tar.gz -C /opt/ [[email protected] ~]#wget http://cdn.npm.taobao.org/dist/nod

使用async/await——Nodejs+ExpressJs+Babel

在使用诸如restify/expressjs等Nodejs Web Framework时,我们最头疼的问题就是回调黑洞. 虽然后又Koa/Koa2号称"The Next Framework"使用co解决问题,但是核心this的设计和各种小流middleware对req/res的随意滥用,导致我对这个框架失去好感. Expressjs依然是我在使用Nodejs编写API和Web时的首选框架. 在使用Expressjs时,如果我们也想使用await/async这些在ES7 stage-3中

让nodeJS支持ES6的词法----babel的安装和使用

要使用Babel, 我们需要nodeJS的环境和npm, 主要安装了nodeJS, npm就默认安装了 , 现在安装nodeJS很简单了, 直接下载安装就好了: 安装es-checker 在使用Babel之前 , 我们要先检测一下当前node对es6的支持情况, 我们使用先es-checker, 命令行下执行: npm -g install es-checker es-checker安装完毕以后, 命令行执行:es-checker , 如下图, 我的node环境版本是v4.4.3, 支持64%哦

ES6入门一：ES6简介及Babel转码器

ES6简介 Babel转码器 Nodejs中使用ES6 WebPack中使用ES6及Babel转码插件 一.ES6简介与转码  1.1一个常见的问题,ECMAScript和JavaScript到底是什么关系? 1996年11月,JavaScript的创造者——Netscape公司,决定将JavaScript提交给国际标准化组织ECMA,希望JavaScript这种语言能够成为国际标准. 1997年,ECMA发布262号标准文件(ECMA-262)的第一版,规定了浏览器脚本语言的标准,并将这种语言

使用ES6+Vue+webpack+gulp构建新一代Web应用

1.推荐学习网站:Vue.js中国 2.Demo环境搭建: 2.1环境配置 安装nodejs环境,具体内容可以百度: 新建一个文件夹: mkdir VUE-ES6-WebPack 全局安装gulp: npm install gulp -g 全局安装webpack: npm install webpack -g 2.2webpack使用 在VUE-ES6-WebPack目录先新建一个webpack.config.js文件,粘贴以下代码: 1 module.exports = { 2 // 这是一个