zoukankan      html  css  js  c++  java
  • 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 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.jsindex.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\node_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 module
    

    4 项目执行

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

    2)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 module
    

    4.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-corebabel-preset-envbabel-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
    行走的小柚子
  • 相关阅读:
    springmvc 方法参数自定义的解析
    numpy生成随机数组,超几何分布与连续分布
    机器学习笔试知识点
    梯度下降(Gradient Descent)小结
    numpy傅里叶变换
    numpy奇异值分解,广义逆矩阵与行列式
    numpy求解特征值和特征向量
    Scrapy简单介绍
    python异步库twisted
    同步,异步,阻塞和非阻塞的通俗理解
  • 原文地址:https://www.cnblogs.com/UncleLivin/p/12188705.html
Copyright © 2011-2022 走看看