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即可）

        <script src="../js/require.js" data-main="main"></script>

        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();