前端项目练习(练习-002-NodeJS项目初始化)

首先,创建一个web-002项目,内容和web-001一样。

下一步,规范一下项目结构,将html,js,css三个文件放到  src/view目录下面:

由于html引入css和js时,使用的是相对路径,所以三个文件的内容都不用修改。

注意,下一步关键,是将项目初始化为nodejs项目。

什么是 node?官方原话:一个基于 Chrome V8 解析引擎的 JavaScript 运行时环境。

换句话说: 把浏览器内的 JS 解析引擎拿出来, 和其它内容进行了一个组装,变成了一个新的东西。 起了个名字叫做 'NodeJS'。

Node.js是目前非常火热的技术,它借助JavaScript天生的事件驱动机制加V8高性能引擎,使编写高性能Web服务轻而易举。

其次,JavaScript语言本身是完善的函数式语言,在前端开发时,开发人员往往写得比较随意,让人感觉JavaScript就是个“玩具语言”。但是,在Node环境下,通过模块化的JavaScript代码,加上函数式编程,并且无需考虑浏览器兼容性问题,直接使用最新的ECMAScript 6标准,可以完全满足工程上的需求。

现在想要成为前端工程师,NodeJS是绕不过去的,所以,学就行了。

要将项目初始化为nodejs项目,首先要安装nodejs。官网地址是:Node.js

根据自己的操作系统,下载稳定版安装即可。

注意:在Windows上安装时务必选择全部组件,包括勾选Add to Path

安装完成后,可以输入  node -v  查看版本:

nodejs安装完成后,还有一个命令,npm,

npm是什么?npm其实是Node.js的包管理工具(package manager)。

为啥我们需要一个包管理工具呢?因为我们在Node.js上开发时,会用到很多别人写的JavaScript代码。如果我们要使用别人写的某个包,每次都根据名称搜索一下官方网站,下载代码,解压,再使用,非常繁琐。于是一个集中管理的工具应运而生:大家都把自己开发的模块打包后放到npm官网上,如果要使用,直接通过npm安装就可以直接用,不用管代码存在哪,应该从哪下载。

可以看到,和Java的Maven很像。

更重要的是,如果我们要使用模块A,而模块A又依赖于模块B,模块B又依赖于模块X和模块Y,npm可以根据依赖关系,把所有依赖的包都下载下来并管理起来。否则,靠我们自己手动管理,肯定既麻烦又容易出错。

下面开始正式初始化项目为nodejs项目,进入项目根目录,执行  npm init 命令:

可以看到,需要输入一个参数package name,项目的名字,默认就是文件夹的名字 web-002,如果要使用默认值,直接按回车即可,就会看到下一个参数的输入:

下一个参数version是版本号,默认值是1.0.0,如果使用默认值按回车即可,进入下一个,

等等等等。。。。。。

在运行npm init指令时,会提示你输入一系列的参数,包括:

1. package name: 包的名称。默认为当前文件夹的名称。

2. version: 包的版本号。默认为1.0.0。

3. description: 包的描述。

4. entry point: 包的入口文件。默认为index.js。

5. test command: 测试包的指令。默认为“test”。

6. git repository: Git仓库地址。

7. keywords: 关键词,用于搜索包。

8. author: 包的作者。

9. license: 包的许可证类型。默认为ISC。

第一个nodejs项目,我们全部使用默认值,一路回车即可:

注意:如果想全部使用默认值,又懒得一路回车,可以直接使用 npm init -y 命令

初始化完成后,可以看到项目根目录下面多了一个 package.json 文件:

什么是package.json文件

package.json是一个基于JSON格式的文件,用于描述Node.js项目中所需的模块以及项目的元数据。它是一个非常重要的文件,几乎所有Node.js项目都需要一个package.json来维护其依赖性和元数据。在Node.js项目中,通过使用 npm 来管理项目的所有依赖关系,而npm又通过读取package.json来确定需要安装哪些依赖包和各个依赖包的版本等信息。

来看一下package.json文件的内容:

目前都是初始化项目时的默认参数,没有其他内容。

其中的 scripts 需要注意,这里是项目中定义的可以执行的指令,使用  npm run 执行,目前定义了一个可以执行的指令,是 test ,那么执行指令的命令就是  npm  run  test  ,后面的内容是

"echo \"Error: no test specified\" && exit 1"  ,表示打印一行字符串,并退出。执行效果如下:

图中圈住的部分,就是执行的结果。后面跟了一个  exit 1  ,代表非正常运行导致退出程序。

exit 0 代表正常运行程序并退出程序,
exit 1 代表非正常运行导致退出程序

我们也可以把这里换成中文输出:

执行效果如下:

还可以手动增加一条指令build:

执行效果如下:

上面就是NodeJS初始化的过程。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/90870.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

详解C语言—文件操作

目录 1. 为什么使用文件 2. 什么是文件 3. 文件的使用 文件指针 文件的打开和关闭 三个标准的输入/输出流: 4. 文件的顺序读写 对字符操作: fputc: fgetc: 练习复制整个文件: 对字符串操作:…

WebGL雾化

目录 前言 如何实现雾化 线性雾化公式 雾化因子关系图 根据雾化因子计算片元颜色公式 示例程序(Fog.js) 代码详解​编辑 详解如何计算雾化因子(clamp()) 详解如何计算最终片元颜色(根据雾化因子计算片元颜色…

数据库学习笔记——DDL

数据库学习笔记——DDL 建立EMPLOYEE数据库: CREATE TABLE employee(employee_ID int not null,employee_name varchar(20) not null,street varchar(20) not null,city varchar(20) not null,PRIMARY KEY(employee_ID) );CREATE TABLE company(company_name varc…

安装php扩展XLSXWriter,解决php导入excel表格时获取日期变成浮点数的方法

安装php扩展XLSXWriter 1、下载安装包 PECL :: Package :: xlswriter #例如选择下载1.3.6版本 2、解压下载包 tar -zxvf xlswriter-1.3.6.tgz 3、进入文件夹,编译 cd xlswriter-1.3.6 phpize ./configure --with-php-config=/usr/local/php7.1/bin/php-config make&am…

搭建自己的搜索引擎之四

一、前言 搭建自己的搜索引擎之三 介绍了通过HTTP RESTful 对ES进行增删改查,这一般手工运维ES时使用,程序代码中最好还是使用Java API去操作ES会更容易维护,但ES API竟然贼多,本篇介绍一下 四种 API及其简单使用。 注&#xff…

第1篇 目标检测概述 —(2)目标检测算法介绍

前言:Hello大家好,我是小哥谈。目标检测算法是一种计算机视觉算法,用于在图像或视频中识别和定位特定的目标物体。常见的目标检测算法包括传统的基于特征的方法(如Haar特征和HOG特征)以及基于深度学习的方法&#xff0…

webpack:使用externals配置来排除打包后的某个依赖插件IgnorePlugin的使用

背景 假设,我们写了一个库并使用 webpack 打包输出 bundle,但是这个库依赖一个第三方包,比如依赖 lodash,这时候我们不想把这个库打包进 bundle 里因为体积会变大,而且我们的主项目里已经安装了这个 lodash&#xff0…

Docker(三)、Dockerfile探究

Dockerfile探究 一、镜像层概念1、通过执行命令显化docker的机制 二、Dockerfile基础命令1、FROM 基于基准镜像【即构建镜像的时候,依托原有镜像做拓展】2、LABEL & MAINTAINER -说明信息3、WORKDIR 设置工作目录4、ADD & COPY 复制文件5、ENV 设置环境常量…

P1496 火烧赤壁【区间排序合并】

P1496 火烧赤壁【区间排序合并】 题目背景 曹操平定北方以后,公元 208 年,率领大军南下,进攻刘表。他的人马还没有到荆州,刘表已经病死。他的儿子刘琮听到曹军声势浩大,吓破了胆,先派人求降了。 孙权任命周…

crypto:Alice与Bob

题目 根据题目描述,将98554799767分解成两个素数 得到两个素数101999和966233。根据题目提示把它们拼接起来进行md5的32位小写哈希

提升您的Mac文件拖拽体验——Dropzone 4 for mac

大家都知道,在Mac上进行文件拖拽是一件非常方便的事情。然而,随着我们在工作和生活中越来越多地使用电脑,我们对于这个简单操作的需求也越来越高。为了让您的文件拖拽体验更加高效和便捷,今天我们向大家介绍一款强大的工具——Dro…

[plugin:vite:css] [sass] Undefined mixin.

前言: vite vue3 TypeScript环境 scss报错: [plugin:vite:css] [sass] Undefined mixin. 解决方案: 在vite.config.ts文件添加配置 css: {preprocessorOptions: {// 导入scss预编译程序scss: {additionalData: use "/resources/_ha…

Confidential Compute Architecture - Arm构架的TEE新模式

1 简介 如今,云计算在分布式计算资源按需使用方面起着重要的作用。许多公司,如亚马逊、谷歌或微软都提供云服务,但使用这些服务需要信任服务提供商。这意味着一方面依赖提供商对抗攻击者,但另一方面也要信任提供商本身。恶意的提供商可能最终滥用其客户的敏感数据。使用可…

8章:scrapy框架

文章目录 scrapy框架如何学习框架?什么是scarpy?scrapy的使用步骤1.先转到想创建工程的目录下:cd ...2.创建一个工程3.创建之后要转到工程目录下4.在spiders子目录中创建一个爬虫文件5.执行工程setting文件中的参数 scrapy数据解析scrapy持久…

计算机视觉与深度学习-循环神经网络与注意力机制-RNN(Recurrent Neural Network)、LSTM-【北邮鲁鹏】

目录 举例应用槽填充(Slot Filling)解决思路方案使用前馈神经网络输入1-of-N encoding(One-hot)(独热编码) 输出 问题 循环神经网络(Recurrent Neural Network,RNN)定义如何工作学习目标深度Elm…

Hadoop分布式文件系统

目录 一、Hadoop 1、Hadoop发展简史 2、HDFS存储模型 3、HDFS架构设计 3.1、角色功能 3.2、元数据持久化 3.3、安全模式 3.4、HDFS中的SNN 3.5、Block的副本放置策略 4、HDFS写流程 5、HDFS读流程 一、Hadoop Hadoop之父Doug Cutting Hadoop的发音[hdu:p] &#x…

uniapp ssr发行后一直Hydration completed but contains mismatches Cannot find module

最开始我用前端网页托管的地址访问一直是 Hydration completed but contains mismatches 解决方案 要从云函数的地址访问项目。 先绑定域名,否则用uniapp自带地址访问一直是下载文件 设置路径 最后效果 uniapp ssr 云函数访问 MODULE_NOT_FOUND:Cannot fin…

【科研】--计算机领域顶会

计算机领域顶会 网络安全领域顶会 S&P IEEE Symposium on Security and Privacy (S&P) dblp链接:https://dblp.uni-trier.de/db/conf/sp/index.html 官网链接: http://www.ieee-security.org/TC/SP2021/program-papers.html CCS Conference…

2023 年 Bitget Wallet 测评

对Bitget Wallet钱包的看法 Bitget Wallet在安全性、产品实力和使用体验方面可与Metamask媲美,甚至有所超越,唯一稍显不足的是知名度稍逊一筹。在众多钱包中,Bitget Wallet是拥有最全面的钱包之一,尤其适合那些希望一步到位&…

面试理论篇一

关于面向对象 注:自用 1,什么是面向对象编程? 面向对象编程是⼀种程序设计思想,通过将问题抽象成对象,通过对象之间的交互和数据封装来实现程序逻辑。 2,Java中的类和对象有什么区别? 类是描述…