实战项目-06(前端(node,npm,babel,模块化,webpack))

Node.js

Node.js是脱离浏览器环境运行js的程序,基于v8引擎(chrome的js的引擎)
模拟服务器的效果,类似于tomcat
安装完成之后可以在如下测试

他可以直接执行js文件

node 01.js

---

NPM

npm是全球最大的模块生态系统,也就是node.js的包管理工具,相当于前端的maven
安装node.js的时候,npm默认也会安装.可以使用npm -v的命令来查看版本

1. 项目的初始化
   在项目文件夹上面右击在终端中打开然后
   npm init -y
   就初始化完一个npm项目并生成了package.json类似于pom.xml
2. 下载依赖
   在刚刚的终端中使用
   npm install jquery
   就会自动下载一个jquery依赖,
3. 初始化别人的前端工程的时候需要
   npm install

遇到的问题(初始化 vue-admin的时候)

启动会报错(编译nodejs项目的时候,使用npm install初始化会出现node-sass包安装失败),报npm ERR! Failed at the node-sass@XXX postinstall script的错误
尝试了其他方法只有自己先卸载node-sass之后.手动下载binding.node(https://links.jianshu.com/go?to=https%3A%2F%2Fgithub.com%2Fsass%2Fnode-sass%2Freleases%2Fdownload%2Fv4.13.0%2Fdarwin-x64-64_binding.node)文件放到C:\Users\Administrator.npminstall_tarball\node-sass\4.12.0中然后重新安装之后就好了???

npm install node-sass@4.12.0--unsafe-perm-D
cnpm i node-sass -D

如果第二次启动项目还不行,就卸载npm uninstall node-sass.然后执行cnpm i node-sass -D就ok

参考:https://www.jianshu.com/p/58dabd9d1d23

---

Babel

是一个广泛使用的转码器,将ES6转换为ES5代码,从而支持到大部分的环境中执行

1. 安装命令

npm install --global babel-cli
babel --version(查看是否有版本号,安装是否成功)

2. 使用

1. 初始化项目
   新建一个文件夹babel并初始化 npm init -y

2. 创建文件es6并在下面创建文件1.js

let input = [1,2,3]
input = input.map(item => item + 1)
console.log(input)

3. 配置.babelrc
   在存放项目的根目录下面

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

4. 安装转码器
   在项目中安装

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

5. 转码
   将转码的结果写入一个文件

babel es6/01.js -o dist/01.js

将整个目录转码

babel es6module -d modulees6

---

模块化

介绍:嵌入网页的js代码越来越庞大,越来越复杂,理想情况下,开发者只需要实现核心的业务逻辑,其他的都可以加载已经写好的模块
规范: 每个文件就是一个模块,有自己的作用域,在一个文件里面定义变量,函数,类,都是私有的,对其他文件不可见

1. 创建module文件夹
   创建导出的文件01.js

//定义方法,设置哪些方法可以被调用
export function getList(){
    console.log('getList.....')

}

export function save(){
    console.log('save....')
}

2. 创建调用的方法02.js

//调用01中的方法
import { getList,save } from "./01";

getList();
save();

其他写法
导出的模块

export default{
	getList(){
		console.log('qwq')
	},
	save(){
		console.log('qeq')
	}
}

导入的模块

import user form "./userqwq"
user.getList()
user.save()

---

Webpack

webpack是一个前端资源加载/打包的工具,它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源
可以看出,webpack可以将多中静态资源js css less 转化成一个静态文件,减少了页面的请求

安装

1. 全局安装
   npm install -g webpack webpack-cli
2. 查看版本号
   webpack -v

初始化项目

1. 创建webpack文件夹
   进入webpack目录,执行命令npm init -y
2. 创建src 并在其下面创建common.js

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

3. src下面创建utils.js

//导出
exports.add = function(a,b){
    return a + b;

4. src下创建main.js

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

common.info('hello common' + utils.add(3,4))

5. js打包,在webpack目录下面创建配置文件webpack.config.js
   以下配置的意思是：读取当前项目目录下src文件夹中的main.js（入口文件）内容，分析资源依赖，把相
   关的js文件打包，打包后的文件放入当前目录的dist文件夹下，打包后的js文件名为bundle.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. 命令执行编译
   webpack --mode=development
7. webpack目录下面创建index.html引入bundle.js

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

8. 浏览器查看
   

9. 注意点.css打包需要安装style-loader和css-loader
   npm install --save-dev style-loader css-loader
   需要修改webpack.config.js加入打包规则
   创建style.css在src下

body{
    background-color: pink;
}

修改main.js在第一行引入require('./style.css')
浏览器查看index.html