大前端基础 es6新语法， node.js 和 包管理器

最新推荐文章于 2023-07-08 09:18:58 发布
最新推荐文章于 2023-07-08 09:18:58 发布
阅读量260 收藏
点赞数
分类专栏： 大前端 文章标签： 前端 es6 node.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44480609/article/details/125375080
版权

1.Node.js 入门

简单的说 Node.js 就是运行在服务端的 JavaScript。
Node.js是一个事件驱动I/O服务端JavaScript环境，基于Google的V8引擎，V8引擎执行Javascript的速度非常快，性能非常好。

1.1 Node.js 安装

node.js
官网
中文网

安装无脑下一步即可。然后打开vscode
前端开发工具vscode的插件按照和简单使用

打开命令行终端：Ctrl + Shift + y
进入到程序所在的目录，终端

输入 node -v
在这里插入图片描述
证明安装完成。

js通常是纠结的是要不要加分号; 因为之前java都是加分号的，这里js因为换行就不需要加了，所以今天的js都不加分号，当然你的java习惯改不过来也可以加上，良好的编码习惯可以避免很多错误

1.2 快速入门

新建文件夹，然后新建test.js

console.log('Hello Node.js')

打开命令行终端：Ctrl + Shift + y
输入 node test.js

在这里插入图片描述

1.3服务器端应用开发

const http = require('http')
http.createServer(function (request, response) {
    // 发送 HTTP 头部
    // HTTP 状态值: 200 : OK
    // 内容类型: text/plain
    response.writeHead(200, {'Content-Type': 'text/plain'})
    // 发送响应数据 "Hello World"
    response.end('Hello Server')
}).listen(8888)
// 终端打印如下信息
console.log('Server running at http://127.0.0.1:8888/')

一样运行 node test.js
在这里插入图片描述

访问 http://127.0.0.1:8888/

在这里插入图片描述
停止服务：ctrl + c

如果想开发更复杂的基于Node.js的应用程序后台，需要进一步学习Node.js的Web开发相关框架
express，art-template等

2.ES6入门

ECMAScript 6.0（以下简称 ES6）是 JavaScript 语言的下一代标准，已经在 2015 年 6 月正式发布了。它的目标，是使得 JavaScript 语言可以用来编写复杂的大型应用程序，成为企业级开发语言。

新建html

<!--DOCTYPE：告诉浏览器使用什么规范（默认是html）-->
<!DOCTYPE html>
<!--语言 zh中文 en英文-->
<html lang="en">
<!--head标签代表网页头部-->

<head>
    <!--meta 描述性标签，表示用来描述网站的一些信息-->
    <!--一般用来做SEO（搜索）-->
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--网站标题-->
    <title>Document</title>
    <script src="../js/es6.js"></script>
  
</head>

<body>
  
</body>

</html>

在js下面新建es6.js

2.1 let声明变量

之前我们所有的变量都是var变量，所类型语言会造成一些问题，不够严谨。

// var 声明的变量没有局部作用域
// let 声明的变量 有局部作用域
{ 
    var a = 0 
    let b = 1 
}
console.log(a) // 0 
console.log(b) // ReferenceError: b is not defined

上面var就会通过，而let会报错，解决数据穿透的问题。

// var 可以声明多次 
// let 只能声明一次
var a = 1
var a =2
let b =1
let b = 2  //报错

以上var可以通过，let会报错

// var 会变量提升
// let 不会变量提升
console.log(a)
var a = 0;
console.log(b)
let b = 0;

上面var是undefined 可以正常运行
let控制台就会报错

2.2 const声明常量


const PI = Math.PI;
PI = 1;   // Assignment to constant variable.

上面声明的常量改变就会报错，var就没得这个

2.3 解构赋值

解构赋值是对赋值运算符的扩展

//传统的赋值
let a =1
let b =2
let c = 3
//  解构赋值
let [x,y,z] = [4,5,6]

//传统的赋值
let  user = {name: '张三', age: 18}
let name1 = user.name
let age1 = user.age
//  解构赋值
let {name,age} = user

注意 let {name,age}必须和user属性相同

2.4 模板字符串

//传统的赋值
let  name = "张三"
let age = 10
let str = "我叫" + name + "今年" + age
//  解构赋值
let str2 = `我叫 ${name} 今年 ${age}`
console.log(str2)

注意这用的不是单引号也不是双引号，是反引号 `

2.5 声明对象简写

const name = "张三"
const age = 18
//传统的赋值
let user = {name:name,age:age}
// 声明对象简写
let user2 = {name,age}

2.6 箭头函数


//传统
var f1 = function(a,b){
    return a + b
}
// es6
var f2 = (a,b) => a + b

3. NPM包管理器

NPM全称Node Package Manager，是Node.js包管理工具，是全球最大的模块生态系统，里面所有的模块都是开源免费的；也是Node.js的包管理工具，相当于前端的Maven。
在这里插入图片描述
安装完node.js就可以查看 npm版本

3.1 初始化

新建npm文件夹
在命令行进入文件夹
npm init
在这里插入图片描述

{
  "name": "npm",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

一路下一步，最终得到一个json，也可以写入规定的命名

#name: 项目名称
#version: 项目版本号
#description: 项目描述
#keywords: {Array}关键词，便于用户搜索到我们的项目
#最后会生成package.json文件，这个是包的配置文件，相当于maven的pom.xml

npm init -y

直接生成，全部默认。

3.2 修改npm镜像

NPM官方的管理的包都是从 http://npmjs.com下载的，但是这个网站在国内速度很慢。
这里推荐使用淘宝 NPM 镜像 http://npm.taobao.org/

#经过下面的配置，以后所有的 npm install 都会经过淘宝的镜像地址下载 
npm config set registry https://registry.npm.taobao.org 
#查看npm配置信息 
npm config list 123

3.3 npm install

#使用 npm install 安装依赖包的最新版，
#模块安装的位置：项目目录\node_modules
#安装会自动在项目目录下添加 package-lock.json文件，这个文件帮助锁定安装包的版本
#同时package.json 文件中，依赖包会被添加到dependencies节点下，类似maven中的 

npm install jquery
npm install jquery@2.1.x

#更新包（更新到最新版本） 
npm update 包名 
#全局更新 
npm update -g 包名 
#卸载包 
npm uninstall 包名 
#全局卸载 
npm uninstall -g 包名

4.Babel

ES6的某些高级语法在浏览器环境甚至是Node.js环境中无法执行。
Babel是一个广泛使用的转码器，可以将ES6代码转为ES5代码，从而在现有环境执行执行
安装

npm install -g babel-cli

检查是否安装完成

babel --version

在这里插入图片描述

4.1Babel 实战

新建babel文件夹

在babel目录下执行

npm init -y

新建文件夹src，新建example.js

// 转码前 
// 定义数据
 let input = [1, 2, 3] // 将数组的每个元素 +1 
 input = input.map(item => item + 1) 
 console.log(input)

写一些es6的语法

配置 .babelrc
在src同层目录新建 .babelrc
在这里插入图片描述

{
"presets": ["es2015"],
 "plugins": [] 
}

安装转码器，在项目中安装

npm install --save-dev babel-preset-es2015

然后转码

mkdir dist
babel src/example.js --out-file dist/compiled.js

在这里插入图片描述
生成的文件已经转换成var了

5. 模块化

5.1 CommonJS规范

每个文件就是一个模块，有自己的作用域。在一个文件里面定义的变量、函数、类，都是私有的，对其他文件不可见。
新建js

mokuai-common.js

// 定义成员：
const sum = function (a, b) {
    return a + b
}
const subtract = function (a, b) {
    return a - b
}
const multiply = function (a, b) {
    return a * b
}
const divide = function (a, b) {
    return a / b
}
// module.exports =
// {
//     sum: sum,
//     subtract: subtract,
//     multiply: multiply,
//     divide: divide
// }

//简写
module.exports =
{
    sum,
    subtract,
    multiply,
    divide
}

在原来的同目录js测试

//引入模块，注意：当前路径必须写 ./ 
const m = require('./mokuai-common.js') 
console.log(m) 
const r1 = m.sum(1,2) 
const r2 = m.subtract(1,2) 
console.log(r1,r2)

控制台运行
在这里插入图片描述

5.2 ES6模块化规范

后面vue用的更多的是es6规范
新建 userApi.js

export function getList(){
    console.log("获取数据列表")
}

export function save(){
    console.log("保存数据")
}

调用

import {getList,save} from './userApi'
getList()
save()

当然这个时候无法直接运行，因为是es6的语法
需要Batel

6.Webpack

Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。

6.1 安装

npm install -g webpack webpack-cli

安装完成查看版本 确定是否完成

webpack -v

在这里插入图片描述

6.2 打包js

先运行

 npm init -y

新建src目录，新建common.js，utils.js，main.js
common.js

exports.info = function (str) {
    document.write(str);
}

utils.js

exports.add = function (a, b) { 
    return a + b; 
}

main.js

const common = require('./common'); 
const utils = require('./utils');

 common.info('Hello world!' + utils.add(100, 200));

webpack目录下 新建 webpack.config.js

const path = require("path");//Node.js内置模块
module.exports = {
    entry: './src/main.js',//配置入口
    output: {
        path: path.resolve(__dirname, './dist'),//输出路径，__dirname：当前文件 所在路径
        filename: 'bundle.js'//输出文件
    }
}

在webpack下运行

 webpack --mode=development

这样就生成打包后的js
在这里插入图片描述
可以用另外一种方式打包，打包packge.json新新增

"dev": "webpack --mode=development"

然后运行

npm run dev

结果相同

6.3 Css打包

6.3.1 安装style-loader和 css-loader

Webpack 本身只能打包js，对于css需要额外的安装插件

npm install --save-dev style-loader css-loader

安装完成，我的packge.json会有引入
在这里插入图片描述

6.3.2 修改webpack.config.js

修改后的js

const path = require("path");//Node.js内置模块
module.exports = {
    entry: './src/main.js',//配置入口
    output: {
        path: path.resolve(__dirname, './dist'),//输出路径，__dirname：当前文件 所在路径
        filename: 'bundle.js'//输出文件
    },
    module: {
        rules: [{
            test: /\.css$/, //打包规则应用到以css结尾的文件上 
            use: ['style-loader', 'css-loader']
        }]
    }
}

6.3.3 测试

在src下新增style.css

body {
    background: pink;
}

在main.js第一行引入

require('./style.css');

运行

npm run dev

然后新生成dist下的js就包含js和css合并加密

总结 对于web运行我们还是用var吧，就不用转码了 ，对于app小程序可以采用es6

信小呆666
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
honk:基于浏览器的 JavaScript ES6+ 包管理器
06-15
鸣喇叭 包管理器仅适用于基于浏览器的 JavaScript ES6+。 它旨在与 jspm 和 systemjs 兼容。 这是一个创建像 jspm 这样的包管理器的实验，但要简单得多，而且没有充满 jspm 代码库中的遗留内容。 例如，我想专注于成为一个包管理器，而根本不做捆绑。 还有很多对不再记录的配置选项的支持，这使得很难分辨代码库中需要什么，什么不需要。 我还想强制人们为他们的依赖项定义存储库。 不再是'angular': 'angular@1.3.4' ，它应该是'angular':'github:angular/bower-angular@1.3.4' 。 这将消除对 repostitory 设置的全部需求，并使事情变得更加清晰。 我也不相信我们需要另一个用于 nodejs 或 browserify 使用的包管理器。 只关注 web 和 systemjs。 这也简化了很多代
JavaScript包管理器综述
weixin_33981932的博客
07-22 93
JavaScript包管理器综述 作者：chszs，未经博主同意不得转载。经许可的转载需注明作者和博客主页：http://blog.csdn.net/chszs 对于JavaScript来说。包管理器并非一个新概念，npm和bower是JavaScript的两个最流行的包管理器工具，JavaScript的包管理器还有volo、ringojs、component。这些包管理器...
ES6特性：模块化、包管理器简单使用
lalala_dxf的博客
05-07 1220
文章目录简介语法方面ES6和ES5的区别变量方面函数方面 自学文档 babel文档 简介 ES6是一个泛指，含义是 5.1 版以后的 JavaScript 的下一代标准，涵盖了 ES2015、ES2016、ES2017 等，ES6 的第一个版本，在 2015 年 6 月发布了正式名称就是《ECMAScript 2015 标准》（简称 ES2015）。 ES6在ES5的基础上拓展了很多新特性。 JavaScript包含三部分：ECMAScript、DOM、BOM，其中ECMAScript是JavaScri.
Node.js包管理器npm
成长ing中的w的专栏
12-13 624
Node.js的包管理器npm【Node Package Manager】：用来安装、共享和发布代码以及管理项目中的依赖。它包含一份package.json文件，这份文件用来管理项目依赖的第3方模块的，跟Android项目的AndroidManifest.xml文件作用类似。Node.js本身集成了npm工具，可以通过命令npm install npm -g实行安装或升级。 首选介绍如何查找自己需要安装的第3方包的方式如下： 1）通过浏览器查询，链接：npmhttps://www.npmjs.com/
Yarn JavaScript 包管理器介绍以及基本用法
西京刀客
10-27 519
文章目录Yarn JavaScript 包管理器什么是yarn如何安装和使用yarn和npm的区别 Yarn JavaScript 包管理器 什么是yarn 参考URL: https://yarn.bootcss.com/ Yarn 是一个由 Facebook 贡献的 Javascript 包管理器。 npm 和 yarn的用途基本都一样，不过，yarn可以说是，升级版的npm，从运行速度和安全角度来说，比npm要好。 如何安装和使用 安装方式: npm install yarn -g yarn和npm的
Node项目pkg打包ES6，以及多进程child-process.fork方式
04-12
介绍帖子参考这里： https://superliii.blog.csdn.net/article/details/124114250
Node.JS从入门到项目实践
06-18
学习node.js之前我们需要首先掌握 javascript ，这套课程将分为5个章节来介绍node.js ① 第一章节：讲解node.js基础知识，比如node安装、引入基础模块等等，从0开始 ② 第二章节：带领大家学习node.js框架，Express...
使用JavaScript实现node.js中的path.join方法
10-18
Node.js的`path`模块使用了ES6语法，如`const`关键字，这在某些不支持ES6的浏览器中可能无法运行。因此，我们需要将这些ES6特性替换为更通用的JavaScript语法，例如将`const`替换为`var`。 3. **核心逻辑**： `...
JavaScript-study:JavaScript +基础知识（ES6语法，高级语法）
05-23
作为第一个计划，在学习js基础知识的同时，我们何时将针对JS ES6语法和各种框架？ 我认为前进的道路越来越近，这是一种很好的感觉。 :smiling_face_with_smiling_eyes: :smiling_face_with_smiling_eyes: 1. JS的...
redux+react+router+node.js
09-03
在全栈开发中，"Redux+React+Router+Node.js"是一个常见的技术组合，用于构建复杂的前端和后端应用程序。这个组合涵盖了用户界面、状态管理、路由以及服务器端处理等多个关键领域。 Redux是一个专门为JavaScript...
ES6之npm包管理器、cnpm包管理器yarn包管理器包管理器对比
qq_51066068的博客
05-07 719
目录 包管理器 提高npm安装速度 方案一：修改npm仓库地址为淘宝仓库地址 方案二：我们可以使用淘宝的npm镜像cnpm，cnpm的使用与npm使用非常类似。不过在使用之前要先安装cnpm。 方案三：我们可以使用淘宝yarn工具，yarn的使用与npm使用类似。不过在使用之前要先安装yarn。 npm包管理器 npm install -g的区别 npm install -S -D 的区别 cnpm包管理器 yarn包管理器 包管理器对比 包管理器 NPM 是 N.
JavaScript 包管理器工作原理简介
weixin_33843947的博客
10-18 245
本文讲的是JavaScript 包管理器工作原理简介， 不久前，Node.js 社区的负责人之一ashley williams发了一条这样的推特： lockfiles = awesome for apps, bad for libs this is not a new thought, i'm confused why's everyone m...
ES6包管理机制以及模块化
叶子yes的博客
09-13 809
ES6是一个泛指，含义是 5.1 版以后的 JavaScript 的下一代标准，涵盖了 ES2015、ES2016、ES2017 等，ES6 的第一个版本，在 2015 年 6 月发布了正式名称就是《ECMAScript 2015 标准》（简称 ES2015）。ES6在ES5的基础上拓展了很多新特性。ES5是2009年发布的，ES6是2015年发布的，ES2015 在ES5基础上拓展了很多新特性。
学习Node.js之前必须了解的ES6语法
Jine
07-02 2346
待更新ing…
前端技术 ES6、Vue、Node.js、NPM包管理器、Babel、模块化、Webpack、vue-admin-template-master框架、服务端渲染技术NUXT
qq_45491549的博客
08-05 799
前端技术ES6入门ECMAScript 6 简介二、基本语法Node.js一、简介二、安装NPM一、简介二、使用npm管理项目BabelWebpack一、什么是Webpack二、Webpack安装三、初始化项目四、JS打包五、CSS打包 ES6入门 ECMAScript 6 简介   ECMAScript 6.0（以下简称 ES6）是 JavaScript 语言的下一代标准，已经在 2015 年 6 月正式发布了。它的目标，是使得 JavaScript 语言可以用来编写复杂的大型应用程序，成为企业级开发语言
包管理工具之一——npm
木头房子的格子铺
08-19 514
包管理工具 NPM yarn
解析es6语法
去旅行、在路上
03-19 136
一、安装 babel-cli babel-preset-es2015 npm i babel-cli,babel-preset-es2015 -s 二、修改package.json 修改dev和start：–exec babel-node { ... "scripts": { "dev": "cross-env NODE_ENV=development nodemon serve...
包管理器 | 浅谈几个常用的包管理工具
青春木鱼的博客
07-08 1753
在前端开发中，npm、pnpm和yarn是三种非常流行的包管理工具。虽然它们的作用都是相同的，但是在实际使用中，它们存在一些不同之处。
【NodeJs】——包管理工具
LSH_的个人博客
06-30 2173
对于许多开发人员和程序员来说，Node.js是一种非常重要的技术。Node.js是一个基于Chrome V8引擎的JavaScript运行时环境，它允许开发人员使用JavaScript编写服务器端代码。Node.js附带了一个强大的包管理器——npm，使开发人员能够轻松地使用和共享模块和库。在Node.js中，包（Packages）是可以用来扩展功能的软件模块。它们由NPM进行管理，通过包管理器可以方便地安装、更新和卸载包。Node.js的包生态系统非常庞大且活跃，拥有众多的开源包可供使用。
web前端模块化开发教程(es6+node.js+webpack)node.js开发教程电子书
最新发布
11-16
ES6作为JavaScript的下一代标准，提供了许多新的语法和特性，使得模块化开发更加便捷和高效。同时，Node.js作为一种服务器端的JavaScript运行环境，也为web前端的模块化开发提供了更多的可能性。 如果你想学习web...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值