• ES6:搭建前端环境


    搭建前端环境 - Node 环境

    1 什么是Node.js

      简单的说 Node.js 就是运行在服务端的 JavaScript。

      JavaScript程序,必须要依赖浏览器才能运行!没有浏览器怎么办?OK,nodejs帮你解决

      Node.js是脱离浏览器环境运行的JavaScript程序,基于Google的V8引擎,V8引擎执行Javascript的速度 非常快,性能非常好。

    2 Node.js有什么用

      如果你是前端程序员,你不懂得像PHP、Python或Ruby等动态编程语言,然后你想创建自己的服务, 那Node.js是一个非常好的选择。

      Node.js 是运行在服务端的 JavaScript,如果你熟悉Javascript,那么你将会很容易的学会Node.js。

      当然,如果你是后端程序员,想部署一些高性能的服务,那么学习Node.js也是一个非常好的选择。

    3 安装

      下载

        官网:https://nodejs.org/en/

        中文网:http://nodejs.cn/

        LTS:长期支持版本

        Current:最新版

        安装:Windows下双击点击安装——>Next——>finish

        注意:

          node-v14.5.0-x64.msi 最新版本,如果是win7系统的话,可能安装不了。

          如果是win7系统,安装node-v10.14.2-x64.msi这个版本

     

       查看版本

          在dos窗口中执行命令查看版本号

            node -v

          创建文件夹 lagou-node, 

          用vscode打开目录,其目录下创建 hello.js

               console.log("hello,nodejs");

          打开命令行终端:Ctrl + Shift + y,

          输入命令

            node hello.js

          第一次运行,可能会报错!

             

          兼容性的问题,以管理员身份运行即可

            

          这样,没有使用浏览器,我们也可以运行js程序了

             

     

    4 服务器端应用开发(了解)

      创建 node-server.js

      

    const http = require("http"); // node中自带的require引入方法,http也是node中自带的服
    务对象
    http.createServer( function(request,response){
    
        // 发出http请求的头部信息
        // http的状态码:200;OK
        // 请求的内容类型:text/plain
        response.writeHead(200,{"Content-Type": "text/plain"});
    
        //响应的数据 "hello,welcome!" ,此时,并不支持中文(以后一定会解决!)
        response.end("hello,welcome!");
    } ).listen(8888); // 监听端口
    
    console.log("服务器已启动,请访问 http://127.0.0.1:8888");

      服务器启动成功后,在浏览器中输入:http://localhost:8888/ 查看webserver成功运行,并输出 html页面

      停止服务:ctrl + c

     

    搭建前端环境 - NPM环境

    1 什么是NPM

      NPM全称Node Package Manager,是Node.js包管理工具

      是全球最大的模块生态系统,里面所有的模块都是开源免费的,也是Node.js的包管理工具,相当于前 端的Maven

      如果一个项目需要引用很多第三方的js文件,比如地图,报表等,文件杂而乱,自己去网上下载,到处 是广告和病毒

      那么,我们就想办法,把这些js文件统一放在一个仓库里,大家谁需要,谁就去仓库中拿过来,方便多 了

      npm就是这个仓库系统,如果你需要某个js文件,那就去远程仓库中下载,放在本地磁盘中,进而引用 到我们的项目中

      管理前端工程 so easy!

    2 NPM工具的安装位置

      node的环境在安装的过程中,npm工具就已经安装好了。

      Node.js默认安装的npm包和工具的位置:Node.js目录 ode_modules

      在这个目录下你可以看见 npm目录,npm本身就是被NPM包管理器管理的一个工具,说明 Node.js已 经集成了npm工具

    #在命令提示符输入 npm -v 可查看当前npm版本
    npm -v

    3 使用npm管理项目

    项目初始化

    全新创建一个目录,作为项目目录,使用dos命令进入此目录,输入命令

    npm init
    # 接下来是一堆项目信息等待着你输入,如果使用默认值或你不知道怎么填写,则直接回车即可。
    # package name: 你的项目名字叫啥 # version: 版本号 # description: 对项目的描述 # entry point: 项目的入口文件(一般你要用那个js文件作为node服务,就填写那个文件) # test command: 项目启动的时候要用什么命令来执行脚本文件(默认为node app.js) # git repository: 如果你要将项目上传到git中的话,那么就需要填写git的仓库地址(这里就不写地 址了) # keywirds: 项目关键字(我也不知道有啥用,所以我就不写了) # author: 作者的名字(也就是你叫啥名字) # license: 发行项目需要的证书(这里也就自己玩玩,就不写了)

    最后会生成package.json文件,这个是包的配置文件,相当于maven的pom.xml

    我们之后也可以根据需要进行修改。

    上述初始化一个项目也太麻烦了,要那么多输入和回车。想简单点,一切都按照默认值初始化即可, ok,安排

    npm init -y

    4 修改npm镜像 和 存储地址

    NPM官方的管理的包都是从 http://npmjs.com下载的,但是这个网站在国内速度很慢。

    这里推荐使用淘宝 NPM 镜像 http://npm.taobao.org/ ,淘宝 NPM 镜像是一个完整npmjs.com 镜 像,同步频率目前为 10分钟一次,以保证尽量与官方服务同步。

    设置镜像和存储地址:

    #经过下面的配置,以后所有的 npm install 都会经过淘宝的镜像地址下载
    npm config set registry https://registry.npm.taobao.org
    
    #设置npm下载包时保存在本地的地址(建议英文目录)
    npm config set prefix "E:\repo_npm"
    
    #查看npm配置信息
    npm config list

    5 npm install命令的使用

    npm install jquery

    使用 npm install 安装依赖包的最新版

    模块安装的位置:项目目录 ode_modules

    安装会自动在项目目录下添加 package-lock.json文件,这个文件帮助锁定安装包的版本

    同时package.json 文件中,依赖包会被添加到dependencies节点下,类似maven中的 <dependencies>

    jQuery版本有很多,上述命令下载的什么版本的?  - 最新版

    如果我的项目使用1.9.1版本进行开发的,通过npm安装的3.5.1版本太新,会导致项目失效,如何 安装指定版本库?

    npm install jquery@1.9.1
  • 相关阅读:
    [日常训练]大灾难
    [cf235D]Graph Game
    [日常训练]选课
    [日常训练]挂科
    [学习笔记]概率&期望
    [日常训练]yayamao的神题
    [学习笔记]原根
    LOJ#2132. 「NOI2015」荷马史诗
    LOJ#2131. 「NOI2015」寿司晚宴
    LOJ#2129. 「NOI2015」程序自动分析
  • 原文地址:https://www.cnblogs.com/JasperZhao/p/15206336.html
Copyright © 2020-2023  润新知