【前端基础三】----node.js&&webpack基础

node.js

一、基本知识
    1.作用：
        node.js是JavaScript的运行环境，用于执行JavaScript代码环境。不需要浏览器，直接使用node.js运行JavaScript代码；模拟服务器效果，如tomcat，其安装一般是无脑下一步。
    2.npm：
        1.概念：结点包管理，相当于maven，管理前端的js依赖，如jquery
        2.具体操作：
            1)npm项目初始化操作

npm init -y

           2)npm下载js依赖

{
npm install 依赖名称@指定版本
(
    设置镜像：
        npm config set registry https://registry.npm.taobao.org
    查看镜像配置
        npm config list
)
}

           3)工具package.json文件下载依赖

npm install

           4)包卸载

npm uninstall -g 包名称

    3.babel:
        1.定义：babel是转码器，把es6代码转es5的代码
        2.安装和查看版本：

npm install --global babel-cli
babel --version

        3.编写es6的js文件，创建babel配置文件“.babelrc”

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

        4.安装es2015转码器

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

        5.使用命令就行转码{
            1）根据文件转码：

babel src/被转换.js -o 目标文件夹/目标.js

            2）根据文件夹转码：

babel 被转换的文件夹 -d 目标文件夹

        }
    4.模块化：
        1）基本概念：
            开发后端的时候，开发controller service mapper，controller注入service，service注入mapper。在后端中类与类之间的调用称模块化操作
            在前端中，js与js之间的调用称为前端模块化
        2）es5实现模块化

//01.js
//创建方法
const sum=function(a,b){
    return parseInt(a)+parseInt(b)
}
const subtract=function(a,b){
    return parseInt(a)-parseInt(b)
}

//设置哪些方法是可以被其他js调用的
module.exports={
    sum,
    subtract
}

===================分隔符=======================

//02.js
//调用01.js方法
//引入01.js
const m=require('./01.js')

//调用
console.log(m.sum(1,2))
console.log(m.subtract(10,5))

        es6模块化
            注：若使用es6的模块化，在node.js中是无法直接运行的，需要使用babel把es6的模块化代码转换成es5的模块化代码，进而才能继续运行。

模块化前：

//01.js
//定义方法，设置哪些方法可以被其他js调用
export function getList(){
    console.log('getList.........>>>>>>')
}
export function save(){
    console.log('.........>>>>>>..........save')
}

=====================分隔符==================

//02.js
// 调用01.js中的方法
import {getList,save} from './01.js'

//调用方法
getList()
save()

通过babel将es6代码转换为es5后进行模块化后：

//01.js
'use strict';

Object.defineProperty(exports, "__esModule", {
    value: true
});
exports.getList = getList;
exports.save = save;
//定义方法，设置哪些方法可以被其他js调用
function getList() {
    console.log('getList.........>>>>>>');
}
function save() {
    console.log('.........>>>>>>..........save');
}

========================分隔符=====================

//02.js
'use strict';

var _ = require('./01.js');

//调用方法
(0, _.getList)(); // 调用01.js中的方法

(0, _.save)();

webpack

一、基本知识：
    1.概念：webpack是一个静态资源打包工具
    2.好处：减少页面的请求次数
    3.打包js步骤：{
        1.安装webpack插件

{
            npm install -g webpack webpack-cli
            //查看版本
            webpack -v
}

        2.创建用于打包的js文件
        3.创建配置文件

{
	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']
	            }  
	        ]  
	    }
	}
}

        4.命令执行编译命令

{
            webpack
            或
            webpack --mode=development
}

        5.测试效果{
            创建一个html文件，引入打包之后的文件，使用浏览器查看效果
        }
    }
    4.打包css步骤：{
        1.创建css文件，写样式内容
        2.在main.js中引入css文件
        3.安装css加载工具

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

        4.在webpack配置文件用于打包css的内容是

{
    module: {
        rules: [  
            {  
                test: /\.css$/,    //打包规则应用到以css结尾的文件上
                use: ['style-loader', 'css-loader']
            }  
        ]  
    }
}

        5.执行打包命令

{
            webpack
            或
            webpack --mode=development
}

}