Webpack初见(1/3)&准备
介绍webpack&学习其需要准备例如NPM等,介绍一些概念如模块化,Babel以及坑
Webpack初见(1/3)&准备
介绍webpack&学习其需要准备例如NPM等,介绍一些概念如模块化,Babel以及坑
因为个人笔记缘故不过多介绍webpack了,只需要记住因为前端的文件和代码很多,需要一个工具来管理这些文件代码,打包的打包,不懂的代码处理成浏览器能理解代码...
部分参考与b站遇见狂神说的webpack视频内容部分
1.1 NPM包管理器
在很久以前大家的网络上其他代码获取不方便, 便有人用一个工具将这些代码集中在一起管理!即npm (即 Node Package Manager 的缩写)，就是我们的 Node 的管理包的管理器。当然npm并不是一开始就和Node捆绑在一起!
是由于Ryan Dahl的男人在2009年创造了Node。他写了 Node.js，但是 Node.js 缺少一个包管理器，于是他和 npm 的作者一拍即合、抱团取暖，最终 Node.js 内置了 npm。后来的事情大家都知道，Node.js 火了。所以我们可以使用npm来下载一些代码(也被叫做包)
1.1.1 简介
官方网站：https://www.npmjs.com/ (首先需要node,版本很重要,太低会导致webpack学习出错,这里不多介绍,有机会后续随笔会写node相关)
#在命令提示符输入 npm -v 可查看当前npm版本npm -v
1.1.2 使用npm管理项目
1、创建文件夹npm
2、项目初始化
#建立一个空文件夹，在命令提示符进入该文件夹 执行命令初始化
npm init
#按照提示输入相关信息，如果是用默认值则直接回车即可。
#name: 项目名称
#version: 项目版本号
#description: 项目描述
#keywords: {Array}关键词，便于用户搜索到我们的项目
#最后会生成package.json文件，这个是包的配置文件，相当于maven的pom.xml
#我们之后也可以根据需要进行修改。
1.1.3 修改npm镜像
1、修改npm镜像
NPM官方的管理的包都是从 http://npmjs.com下载的，但是这个网站在国内速度很慢。
这里推荐使用淘宝 NPM 镜像 http://npm.taobao.org/
淘宝 NPM 镜像是一个完整 npmjs.com 镜像，同步频率目前为 10分钟一次，以保证尽量与官方服务同步。
2、设置镜像地址
#经过下面的配置，以后所有的 npm install 都会经过淘宝的镜像地址下载
npm config set registry https://registry.npm.taobao.org
npm install -g cnpm --registry=https://registry.npm.taobao.org
#查看npm配置信息
npm config list
1.1.4、npm install
- 首先可以简写 -i
npm -i xxx
- 当我们使用 npm install 会安装依赖包的最新版且安装到dependencies的生产依赖中记录(后续会讲到),当然有一些包的最新版需要你输入@next
npm install xxxx@next //这种才是最新版
- 如果安装时想指定特定的版本
npm install jquery@2.1.x
- 模块安装的位置：项目目录\node_modules,安装会自动在项目目录下添加 package-lock.json文件，这个文件帮助锁定安装包的版本同时package.json 文件中
- 局部安装dependencies,记住安装代码一个s
npm install xxx //默认安装到生产依赖dependencies
npm install xxx -save 或者
npm install xxx -S
-
全局安装devDependencies：开发时的依赖包，项目打包到生产环境的时候不包含的依赖,使用 -D参数将依赖添加到devDependencies节点
记住其中有一个大D
npm install --save-dev eslint
或
npm install -D eslint
-
Node.js全局安装的npm包和工具的位置：
用户目录\AppData\Roaming\npm\node_modules(可以自己修改全局文件夹位置,这里不多介绍,有机会后续随笔会写)
一些命令行工具常使用全局安装的方式npm install -g webpacknpm管理的项目在备份和传输的时候一般不携带node_modules文件夹
-
根据package.json中的配置下载依赖，初始化项目
-
这里提供给大家一个图对比,就是没有大写,其中yarn是另一个与npm相似的工具(这里不多介绍,有机会后续随笔会写)
1.1.5 其他命令
#更新包（更新到最新版本）
npm update 包名
#全局更新
npm update -g 包名
#卸载包
npm uninstall 包名
#全局卸载
npm uninstall -g 包名
2.1 模块化
2.1.1 简介
模块化产生的背景
随着网站逐渐变成”互联网应用程序”，嵌入网页的Javascript代码越来越庞大，越来越复杂。
Javascript模块化编程，已经成为一个迫切的需求。理想情况下，开发者只需要实现核心的业务逻辑，其他都可以加载别人已经写好的模块。但是，Javascript不是一种模块化编程语言，它不支持”类”（class），包（package）等概念，也不支持”模块”（module）。
模块化规范
- CommonJS模块化规范
- ES6模块化规范
2.1.2 CommonJS规范
每个文件就是一个模块，有自己的作用域。在一个文件里面定义的变量、函数、类，都是私有的，对其他文件不可见。
1、创建“module”文件夹
2、创建 mokuai-common-js/四则运算.js
// 定义成员：
const sum = function (a, b) {
return a + b;
};
const subtract = function (a, b) {
return a - b;
};
const multiply = function (a, b) {
return a * b;
};
const divide = function (a, b) {
return a / b;
};
// 导出成员：
module.exports = {
sum: sum,
subtract: subtract,
multiply: multiply,
divide: divide
}
3、导出模块中的成员(可以省略 es6的对象简写 -- 同名的属性不写)
// 导出成员：
module.exports = {
sum,
subtract,
multiply,
divide
}
4、创建 mokuai-common-js/引入模块.js
//引入模块，注意：当前路径必须写 ./
const m = require('./四则运算.js')
console.log(m)
const r1 = m.sum(1,2)
const r2 = m.subtract(1,2)
console.log(r1,r2)
5、运行程序
node 引入模块.js
2.1.3 ES6模块化规范
ES6使用 export 和 import 来导出、导入模块。
1、创建 mokuai-es6 文件夹
2、创建 src/userApi.js 文件，导出模块
export function getList() {
console.log("获取数据列表");
}
export function save() {
console.log("保存数据");
}
3、创建 src/userComponent.js文件，导入模块
//只取需要的方法即可，多个方法用逗号分隔
import { getList, save } from './userApi.js'
getList()
save()
**注意：这时的程序无法运行的，因为ES6的模块化无法在Node.js中执行，需要用Babel编辑成ES5后再执行。**后续再提babel
2.1.2.ES6模块化写法2
1、创建 src/userApi2.js ，导出模块
export default {
getList() {
console.log("获取数据列表2");
},
save() {
console.log("保存数据2");
},
};
2、创建 src/userComponent2.js，导入模块
import user from "./userApi2.js"
user.getList();
user.save();
3、执行命令转码
npm run build
4、运行程序(当然还是失败因为无法识别es6语法)
node dist/userComponent2.js
后续会继续接受webpack中的babel等内容, 并运行这期失败的程序,今天就到这了!
