day29 es6转es5 模块化开发 webpack
一、将es6转成es5的操作需要通过gulp-babel插件完成
1） npm install -g babel-cli 全局安装babel
npm install --save-dev babel-preset-es2015 本地安装
2）npm init -y 生成package.json文件
3） 项目目录创建文件根目录下创建一个index.js,代码：
let =45；
和新建自定义文件：.babelrc 代码：
{
"presets":[
"es2015"
],
"plugins" : []
}
4）运行：babel index.js -o dist/index.js（这个路径必须要先建好） -o意为输出
该命令表示将index.js转换后输出到dist目录下的index.js文件中
此时，dist/index.js文件里就有
"use strict";
var a = 45;（这样就把es6转成了es5）
二、模块化开发es6
export导出
import导入
统一在一个地方实现所有功能。
1)模块化开发的一个思路：
a）把一个整体功能分开来实现
b）单一实现各自的功能
c）把单一功能合为一个整体
2）首先，执行 npm install --save-dev babel-preset-es2015 这个命令安装一下
然后、npm init -y 就是初始化package.json文件
3）认识export和import的使用
在sub.js中写
1）变量：export var a = 5;
2）数组：var arr = [3,2,4,5];
3）对象 var obj = {
name : "tom"
}
4）函数function box(a,b){
return a+b;
}
export {arr as a,obj,box as b};（as a 取别名）
在index.js中写
import {a,obj,b} from "./sub.js";（./是与index.js同目录下）
//console.log(a,obj.name);
console.log(b(a[2],6));//10
4）第三方插件实现模块化开发。
模块化开发，可以一次性引入多个模块文件 无关顺序
a. require.js模块化开发解决的问题：
js引入的顺序问题
js频繁引入的问题
b. require.js引入（整个页面(.html)只需要引入require.js即可）
data-main ：程序入口(必须要是这个)
main ：自定义的js文件，实现程序，无需加扩展名.js
c. main实现：
其它依赖模块注入 并重命名
requirejs.config({
paths : {//模块路径
"jquery" : "js/jquery.min",//注意这里为重命名，不能加扩展名，jquery重命名名称必需为jquery
"eq" : "js/equal"//自定义功能模块
}
})
编写代码：["jquery","eq"]:依赖注入
requirejs(["jquery","eq"],function($,obj){
console.log($("#box").css("color","red"));
obj.run();
obj.setEle("box");
var box=obj.getEle();
console.log(box.innerHTML);
obj.setBox($);
})
自定义模块：equal.js,自定义模块写在define()函数中
define(function(){
return {
ele:null,
setEle:function(id){
this.ele=document.getElementById(id);
},
run:function(){
alert(11);
},
getEle:function(){
return this.ele;
},
setBox:function($){
$(this.ele).css({
width:"100",
height:"200",
background:"red"
})
}
}
})
三、webpack
1.全局安装 npm install -g webpack@3
2.在项目中安装 npm install --save-dev webpack@3
3.配置package.json文件 npm init -y
4.配置webpack.config.js文件(手动创建这个文件，不能敲错一个字)
代码：
//引入path模块，node环境中自带的模块
const path = require("path");
module.exports = {//模块暴露
entry : "./src/entry.js",//入口文件配置项（相对路径即可，相对于webpack.config.js文件）
output : {
path : path.resolve(__dirname,"dist/"),//（必需使用绝对路径，__dirname为path中获取项目绝对
路径的属性）
filename : "bundle.js"
}
}
说明：
源文件（入口文件）一般放在src目录下index.js
代码：document.write("我要向上");
每次在这里修改代码都要再手动输入命令webpack运行
打包后的文件（出口文件）一般放在dist目录下bundle.js
输入命令 webpack 在dist文件夹下生成了bundle.js（里面的内容和index.js文件一样）
5.测试打包项目：（解决手动输入webpack命令运行）
运行命令：
方式二：package.json的script中添加自定义字段属性，值为webpack
如："start" : "webpack"
运行：npm run start
(有点多余)
方式三：自动监听
package.json的script中添加自定义字段属性，值为webpack --watch
如："autoStart" : "webpack --watch"
（太麻烦）
方式四：自动监听（一般用这个）
命令：webpack --watch
退出自动监听：ctrl+c
6.插件html-webpack-plugin 自动生成index.html
安装该插件命令：
npm install --save html-webpack-plugin
修改webpack.config.js文件让插件生效
const htmlWebpackPlugin = require("html-webpack-plugin");//引入插件模块
module.exports = {//模块暴露
entry : "./src/entry.js",//入口文件配置项（相对路径即可，相对于webpack.config.js文件）
output : {
path : path.resolve(__dirname,"dist/"),//（必需使用绝对路径，__dirname为path中获取项目绝对
路径的属性）
filename : "bundle.js"
}，
plugins : [
new htmlWebpackPlugin() //创建插件，应用对象
]（添加一个属性）
}
执行命令webpack将会自动生成一个index.html文件
如果修改这个index.html文件，运行webpack的时候，修改后的内容将会被重新生成的index.hmtl覆盖
要使修改后的index.html不被覆盖需要在插件构造函数中传递如下内容：
filename : "newIndex.html",//输出新文件
template : "dist/index.html"//修改的html文件
即：
plugins : [
new htmlWebpackPlugin({
filename : "newIndex.html",//输出新文件
template : "dist/index.html"//修改的html文件以这个文件为模版
})
]
7.js文件合并
require("js文件路径")//可导入其它js的代码（同级目录下，要用相对路径index.js文件中写require("./header.js");导入header.js文件
第三方js文件也可用module.exports = {}的方式暴露模块在header.js文件下写
module.exports={
run:function(){
document.write("通过exports添加内容")
}
}
var obj = require("js文件路径")//接收暴露的模块
在index.js文件下写
var obj=require("./header.js");
obj.run();
8.样式打包，安装loader加载器 可以将静态的样式文件一同打包到bundle.js文件中
安装：
npm install --save css-loader
npm install --save style-loader
在index.js中导入样式
require("!style-loader!css-loader!../css/style.css");//静态资源导入需要加！（英文下的），必须先导入style-loader
9.压缩js文件
webpack内置了压缩插件，存放在webpack的optimize对象下
webpack.config配置文件中
1. 引入webpack模块
var webpack = require('webpack')
2. 获取压缩插件对象
var UglifyJsPlugin = webpack.optimize.UglifyJsPlugin;是一个对象
3. plugins中添加一个插件对象
new UglifyJsPlugin();