前端学习中。。。。。。

前端学习中。。。。。。_第1张图片

 

一、VSCode 使用

VSCode(全称:Visual Studio Code)是一款由微软开发且跨平台的免费源代码编辑器。该软件支持语法高亮、代码自动补全(又称 IntelliSense)、代码重构、查看定义功能,并且内置了命令行工具和 Git 版本控制系统。用户可以更改主题和键盘快捷方式实现个性化设置,也可以通过内置的扩展程序商店安装扩展以拓展软件功能。

VS Code 使用 Monaco Editor 作为其底层的代码编辑器。

在 2019 年的 Stack Overflow 组织的开发者调查中,Visual Studio Code 被认为是最受开发者欢迎的开发环境。

前端学习中。。。。。。_第2张图片

Visual Studio Code 默认支持非常多的编程语言,包括 JavaScript、TypeScript、CSS 和 HTML;也可以通过下载扩展支持 Python、C/C++、Java 和 Go 在内的其他语言。支持功能包括语法高亮、括号补全、代码折叠和代码片段;对于部分语言,可以使用 IntelliSense。Visual Studio Code 也支持调试 Node.js 程序。和 GitHub 的 Atom一样,Visual Studio Code 也基于 Electron 框架构建。

Visual Studio Code 支持同时打开多个目录,并将信息保存在工作区中以便复用。

作为跨平台的编辑器,Visual Studio Code 允许用户更改文件的代码页、换行符和编程语言。


VScode 安装

  • VScode 官网地址:Visual Studio Code - Code Editing. Redefined
  • VScode 官方文档地址:Documentation for Visual Studio Code

我们可以在 VScode 官网首页下载对应系统(支持Windows、Linux、macOS)的软件:

前端学习中。。。。。。_第3张图片

你也可以打开下载页面 Download Visual Studio Code - Mac, Linux, Windows,下载想要的格式包:

前端学习中。。。。。。_第4张图片

VSCode 安装很简单,macOS 下载 zip 解压后就能使用。

本章节我们以 Windows 为例下载安装包,然后双击打开安装包,点击 Next:

前端学习中。。。。。。_第5张图片

选中接受协议选项,然后点击 Next:

前端学习中。。。。。。_第6张图片

选择安装路径,也可以直接使用默认的:

前端学习中。。。。。。_第7张图片

点击 Next:

前端学习中。。。。。。_第8张图片

注意安装路径设置、环境变量默认自动添加到系统中,勾选以下所有选项:

前端学习中。。。。。。_第9张图片

最后我们点击 Install 就可以完成安装了:

前端学习中。。。。。。_第10张图片

前端学习中。。。。。。_第11张图片


安装汉化包

VScode 安装汉化包很简单,打开 VScode,点击安装扩展,在搜索框输入 Chinese,然后点 Install 就可以:

前端学习中。。。。。。_第12张图片

VScode 的扩展功能非常强大,我们可以找到几乎所有开发需要的工具,当然也可以自己开发。

VScode 扩展说明文档参考:Managing Extensions in Visual Studio Code


界面说明

以下是 VScode 启动后的界面,简单说明如图:

前端学习中。。。。。。_第13张图片

二、ES6

简介

ES6, 全称 ECMAScript 6.0 ,是 JavaScript 的下一个版本标准,2015.06 发版。ES6 主要是为了解决 ES5 的先天不足,比如 JavaScript 里并没有类的概念,但是目前浏览器的 JavaScript 是 ES5 版本,大多数高版本的浏览器也支持 ES6,不过只实现了 ES6 的部分特性和功能。

ECMAScript 的背景

JavaScript 是大家所了解的语言名称,但是这个语言名称是商标( Oracle 公司注册的商标)。因此,JavaScript 的正式名称是 ECMAScript 。1996年11月,JavaScript 的创造者网景公司将 JS 提交给国际化标准组织 ECMA(European computer manufactures association,欧洲计算机制造联合会),希望这种语言能够成为国际标准,随后 ECMA 发布了规定浏览器脚本语言的标准,即 ECMAScript。这也有利于这门语言的开放和中立。

ECMAScript 6 目前基本成为业界标准,它的普及速度比 ES5 要快很多,主要原因是现代浏览器对 ES6 的支持相当迅速,尤其是 Chrome 和 Firefox 浏览器,已经支持 ES6 中绝大多数的特性。

前端学习中。。。。。。_第14张图片

 ECMAScript 6 技术栈

前端学习中。。。。。。_第15张图片

三、Node.js

四、Vue框架

五、Babel

       Babe 是一个JavaScript 编译器,我们可以使用es的最新语法编程,而不要担心浏览器兼容问题。ES6的新特性有些浏览器不支持,它会自动转化为浏览器兼容的代码。

六、Webpack

自动化项目构建(打包)工具。gulp也是同类产品。

webpack 是一个现代 JavaScript 应用程序的静态模块打包器 (module bundler) 。当 webpack 处理应用程序时,它会递归地构建一个依赖关系图 (dependency graph) ,其中包含应用程序需要的每个模块,然后将所有这些模块打包成一个或多个 bundle 。

webpack 主要有四个核心概念:

  • 入口 (entry)
  • 输出 (output)
  • loader
  • 插件 (plugins)

入口 (entry)

入口会指示 webpack 应该使用哪个模块,来作为构建其内部依赖图的开始。进入入口起点后,webpack 会找出有哪些模块和库是入口起点(直接和间接)依赖的。在 webpack 中入口有多种方式来定义,如下面例子:

单个入口(简写)语法:

const config = {
  entry: "./src/main.js"
}

对象语法:

const config = {
  app: "./src/main.js",
  vendors: "./src/vendors.js"
}

输出 (output):

output 属性会告诉 webpack 在哪里输出它创建的 bundles ,以及如何命名这些文件,默认值为 ./dist:

const config = {
  entry: "./src/main.js",
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, 'dist')
  }
}

loader

loader 让 webpack 可以去处理那些非 JavaScript 文件( webpack 自身只理解 JavaScript )。loader 可以将所有类型的文件转换为 webpack 能够有效处理的模块,例如,开发的时候使用 ES6 ,通过 loader 将 ES6 的语法转为 ES5 ,如下配置:

const config = {
  entry: "./src/main.js",
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
          test: /\.js$/,
          exclude: /node_modules/,
          loader: "babel-loader",
          options: [
            presets: ["env"]
          ]
      }
    ]
  }
}

插件 (plugins)

loader 被用于转换某些类型的模块,而插件则可以做更多的事情。包括打包优化、压缩、定义环境变量等等。插件的功能强大,是 webpack 扩展非常重要的利器,可以用来处理各种各样的任务。使用一个插件也非常容易,只需要 require() ,然后添加到 plugins 数组中。

// 通过 npm 安装
const HtmlWebpackPlugin = require('html-webpack-plugin');
// 用于访问内置插件 
const webpack = require('webpack'); 
 
const config = {
  module: {
    rules: [
      {
          test: /\.js$/,
          exclude: /node_modules/,
          loader: "babel-loader"
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({template: './src/index.html'})
  ]
};

利用 webpack 搭建应用

webpack.config.js

const path = require('path');
 
module.exports = {
  mode: "development", // "production" | "development"
  // 选择 development 为开发模式, production 为生产模式
  entry: "./src/main.js",
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: "babel-loader",
        options: [
          presets: ["env"]
        ]
      }
    ]
  },
  plugins: [
    ...
  ]
}

上述例子构建了一个最简单的配置,webpack 会从入口 main.js 文件进行构建,通过 loader 进行js转换,输出一个为 bundle.js 的文件,至此一整个过程就构建完成。

持续更新中......

你可能感兴趣的:(node.js,vue.js,javascript)