前后端分离中经常用到的工具

最新推荐文章于 2023-11-16 15:56:37 发布

七秒～车

最新推荐文章于 2023-11-16 15:56:37 发布

阅读量707

点赞数

分类专栏：前端开发工具及基础知识文章标签： node webpack npm babel

本文链接：https://blog.csdn.net/m0_46742141/article/details/120348601

版权

前端开发工具及基础知识专栏收录该内容

2 篇文章 0 订阅

订阅专栏

0.node.js(脱离浏览器也可以运行JavaScript，只要有JavaScript引擎就可以)
0.1.node.js是基于Chorme v8引擎的JavaScript运行环境；
0.2.作用：
0.2.1：javascript运行环境
eg:直接创建01.js编写代码：console.log("hello node") ---->运行：node 01.js
0.2.2: 模拟服务端效果
0.2.3：BFF：服务于前端的后台
0.3.安装:下载对应操作的包，一直点击下一步即可.
0.4.模拟服务器效果02.js代码如下：

  //引入http模块
  const http=require('http');
  //创建服务器
  http.createServer(function(reqeust,response){
  //发送http头部
  //http状态值200，ok
  //内容类型：text/plain
  response.writeHead(200,{'Content-Type':'text/html'});
  //发送响应数据"hello world"
  response.end('<h1>Hello node.js Server</h1>')
  }).listen(8888);
  //终端打印如下信息
  console.log("Server running at http://127.0.0.1:8888/")

1.NPM管理器

1.1简介：NPM全称node package manager,是Node.js包管理工具,是全球最大的模块生态系统，里面所有的模块都是开源免费的，也是node.js的包管理工具
相当于前端的maven
1.2安装：不需要单独安装，安装完成nodejs之后npm自动安装上；
1.2.1查看：npm -v
1.3快速使用：1.创建项目文件夹---->项目初始化(npm init 设置内容 npm init -y 直接快速初始化)
2.修改npm镜像：npm官方的管理的包都是从http://npmjs.js下载的，但是这是网站在国内速度比较慢，所以
用淘宝NPM镜像http://npm.taobao.org/ ,淘宝npm镜像是一个完整npmjs.com镜像，同步频率目前为10分钟一次，以保证尽量与官方服务同步
具体做法：
#经过下面配置，以后所有的npm install都会经过淘宝的镜像地址下载

   npm config set registry https://registry.npm.taobao.org

#查看npm配置信息

   npm config list

3.下载依赖测试：npm install  依赖名称

  eg： npm install jquery

#指定版本的下载

eg： npm install jquery@2.1.x
下载开发依赖

  npm install --save-dev eslint //只在开发环境工作区安装eslint语句检测   或简写：npm install -D eslint
  npm install --global webpack //全局安装，任何地方都可以用webpack打包命令， 或简写：npm install -g webpack

其他命令

 #更新包
 npm update 包名
 #全局更新
 npm update -g 包名
 #卸载包
 npm uninstall 包名
 #全局卸载
 npm uninstall -g 包名

4.根据配置文件下载依赖

  npm install

2.element-ui是由饿了吗提供的一套前端框架

3.模块化：在后端中意思就是对象调用对象
在前端中意思就是js调用js
eg:es6的两种模块化写法；第一种：
01.js

export default{
	list(){
	console.log("list.....")
	},
	show(){
	console.log("show...")
	}

}

02.js

import user from './01.js';//引入
//调用
user.list();
user.show();

然后在项目集成终端运行node 02.js	
eg:es6的两种模块化写法；第二种：

01.js

  export function list(){
    console.log("es6的另一种写法list方法")
  }
  export function show(){
      console.log("es6的另一种写法show方法")
  }

02.js

 import {list,show} from '01.js'
  list();
  show();

4.babel转码器：可将es6转为es5;nodejs环境若无法直接执行es6的话，需要将es6转为es5
首先需要

#安装babel
npm install -g babel-cli 
#查看
babel --version

#建立.babelrc文件于根目录下,文件内容：

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

  #安装2015转码器：
  npm install -D babel-preset-es2015
  #使用命令进行转码：
  babel src -d dist //将src目录下的文件进行转码到dist目录下

01.js转码如下：

 "use strict";

  Object.defineProperty(exports, "__esModule", {
      value: true
  });
  exports.default = {
      list: function list() {
          console.log("这是一个list方法");
      },
      show: function show() {
          console.log("这是一个·show方法");
      }
  };

02.js转码如下：

  "use strict";
  Object.defineProperty(exports, "__esModule", {
      value: true
  });
  exports.default = {
      list: function list() {
          console.log("这是一个list方法");
      },
      show: function show() {
          console.log("这是一个·show方法");
      }
  };

es6的两种写法都需要经过babel转码器转码之后才能使用node运行js
5.webpack 打包工具
#首先进行安装webpack工具：创建一个webpack文件目录，进行初始化npm init -y

npm install -g webpack webpack-cli
 或
npm install -g webpack 
npm install -g webpack-cli

#查看版本

webpack -v

使用：将两个js包打包成一个
#首先引入两个js文件到另一个文件main.js中
01.js

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

02.js

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

main.js

const a=require("./01.js")
const b=require('./02.js')
a.info('hello'+b.add(1,2))

#在打包文件夹下创建固定名称文件webpack.config.js

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

#打包命令：

webpack --mode=development

#打包出来的这个js文件在html中；在webpack目录下创建01.html文件引入bundle.js包

<body>
    <script src="./dist/bundle.js"></script>
</body>

webpack可以讲多种静态资源js、css、less转换成一个静态文件，减少页面请求

#eg：打包样式文件css
##首先安装样式加载器

npm install -D style-loader css-loader

#在webpack目录下创建一个style.css文件

body{
    background-color: brown;
}

#同时在webpack.config.js下配置css

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

#在main.js中引入style.css文件

const a=require("./01.js")
const b=require('./02.js')
require('./style.css')
a.info('hello'+b.add(1,2))

#删除dist目录下的bundle.js文件,然后进行重新打包

webpack --mode=development

#在01.html中重新运行加载bundle.js文件

=================================================================================================

安装vscode软件
在应用管理中安装如下几个插件
在这里插入图片描述

七秒～车

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
前后端分离中经常用到的工具

=========================================================node.js是基于浏览器chorme v8的前端引擎，使用nodejs可以模拟服务器，同时也支持javascript的运行环境支持服务于前端的后端。npm包管理工具===Mavennpm是全球最大包管理仓库并且开源1.安装：如果电脑上已经安装了nodejs，则不需要安装npm，因为nodejs的安装会自带npm1.1查看版本：npm --version1.2使用：创建项目文件夹–
复制链接

扫一扫