esm前端模块化

ESM（ECMA Script Modules）

AMD：

    异步模块定义，我们引用 js文件都是使用 script标签来引用的，这种通常情况下都是异步引用，我们一般在网络中引用文件，引用完之后才能进行解析和运行。我们请求一个模块也是一样，如果这个模块返回的时间不固定，我们只能异步引用的方式，让模块导入之后在开始运行。

    1.Requirejs

　　RequireJS是一个javascript文件和模块加载程序，针对浏览器进行了优化，但可以在其他javascript环境中使用，如Rhino和node,可以提高代码的速度和质量

　　它可以实现js文件的异步加载，避免网页失去响应，管理模块之间的依赖性，便于代码的编写和维护。

         data-main

　　　　 指定网页程序的主模块，data-main申明的文件会被第一个被requireJS加载

        　　可以创建  main.js->s.js->math.js

       　　  main.js是入口函数，依赖导用 s.js这个模块， s.js的作用是计算图形的面积，而在 math.js中定义了一些数学运算，相当于 s.js这个模块是依赖于 math.js这个模块的，而 math.js是独立于其他模块的，

        　　 <script src="../js/requirejs/require.js" data-main="../js/requirejs/main.js"></script> 定义到了 main.js的入口文件

　　 require.config()

            可以对模块的加载行为进行自定义，写在主模块的头部，参数就是一个对象，里面有一个重要的属性path,这个属性定义了各个模块的加载路径，还有另一种方法baseUrl,它是直接改变基目录的一种方法

         define()函数

            模块必须使用特定的define函数进行定义，如果一个模块不依赖其他的模块，就可以直接定义在define函数之中，

     2.模块的定义

         1.独立模块

         2.依赖于其他模块的模块

            在 math.js中定义模块的方法，

                define(function(){
                    var PI = 3.14;
                    function multiple(num1,num2){//定义一个乘法，
                        return num1 * num2;
                    }
                    function square(n){//定义平方
                        return Math.pow(n,2);
                    }
                    return {//将数据导出
                        PI : PI,
                        multiple : multiple,
                        square : square
                    }
                })

            在 s.js中定义模块的方法，

                define(['./math'],function(m1){//用中括号定义依赖模块的名字，并且要传入一个参数m1代表这个math模块，如果引用了多个模块，要按照顺序写入对应的参数，
                    function circle(r){//定义一个圆的面积,r代表半径
                        return m1.multiple(m1.PI,m1.square(r));
                    }
                    return{
                        s_circle : circle;//返回这个方法
                    }
                })

            在 main.js中定义模块的方法，

                (function(){//立即执行函数
                    require(['./s],function(s1){//定义依赖s.js的模块,通过参数s1传递
                        console.log(s1.s_circle(10));
                    })
                })()

 

     3.模块的导入 

CommonJS & Webpack

     commonjs在定义模块的时候是使用同步的方式，前端开发的 js比如在引用一个 script的标签的时候是异步的方式，在前端中使用 commonjs需要使用到一些辅助工具，可以使用 webpack来进行 commonjs的模块开发，它其实是一个前端的打包工具，它能将请求的动态资源转换成静态的资源，在这里我们使用 commonjs请求的模块全部打包到一个文件中，以便于我们使用同步的模块请求，先安装 webpack。

     1.nodeJS模块的定义。

     2.nodeJS模块的导入。

     3.Webpack 和前端CommonJS.

         main.js的定义方式

            var s = require('./s');
            console.log(s.s_circle(10));
        math.js的定义的方式
            var PI = 3.14;
            function multiple(num1,num2){
                return num1 * num2 ;
            }
            function square(n){
                return Math.pow(n,2);
            }
            module.exports = {
                PI : PI,
                multiple : multiple,
                square : square
            }

         s.js的定义的方式

            var m = require('./math');
            function circle(r){
                return m.multiple(m.PI,m.square(r));
            }
            module.exports = {
                s_circle : circle
            }

 

1.什么是GULP

     1.automate and enhance your workflow 自动化、增强你的工作流

    2.gulp is a toolkit for automating painful or time-consuming tasks in your development workflow,so you can stop messing around and build something

     gulp是一个工具包，可以帮助我们解决开发过程中的痛苦或耗时的任务，避免出现低级错误。

    3.特点

         1.易于使用

        2.构建快速

        3.插件高质

        4.易于学习

2.GULP配置环境

     1.安装nodejs

    2.全局安装gulp-cli

         npm install gulp-cli -g

     3.创建package.json

        在需要使用的环境下  npm init

     4.局部安装gulp

         npm install gulp --save-dev（最好用这个版本，最新版本可能报错 npm install --save-dev gulp@3.9.1）;会将安装接入到 package当中，这样我们下次再直接安装这些包的时候， npm install 会将介入进去的包的 package一起下载下来，

     5.创建gulpfile.js

        var gulp = require('gulp');
        gulp.task('default',function(){
            //place default code
        })

 

     6.命令行执行gulp命令

3.GULP基本使用

4.GULP的插件使用与安装

 

gulp的基本使用

     1.开发项目路径，以及构建中需要做的事

         src文件夹是开发时候用的，发布的时候会自动生成 dist文件夹，先建立一个 gulpfile.js， gulp操作的时候是基于任务， gulp定义任务是 gulp.task();

     2.gulp.task();

        创建一个 gulp任务，第一个参数为任务的名称，第二个参数是任务所依赖的其他任务（如果任务没有依赖，可以省略），第三个参数是执行任务所需要的代码

        在 cmd中的作业路径中输入任务的名称测试 gulp copy-index是否成功，

     3.gulp.src();

        需要操作的文件的路径

     4.gulp.dest();

        需要操作的文件复制到目的地的路径。

     5.gulp.watch();

        作用是监听文件的改变，并执行备用的任务

         1.gulp自带watch

         2.gulp-watch

            var gulp = require('gulp');//请求这个模块
            gulp.task('copy-index',function(){//第一个参数copy-index,这里因为是一个独立的任务，没有其他依赖任务，所以是独立的，不需要第二个参数
            gulp.src('./src/index.html')//取到指定的文件。
                .pipe(gulp.dest('./dist'))//pipe是管道的意思，作用是取得pipe之前的文件流作为pipe的参数内函数执行的输入,gulp.dest的作用是将输入的文件流写入到指定的路径下，现在输入的文件流就是src取到的文件流，
            });
            gulp.task('copy-html',function(){
                gulp.src('./src/html/*.html')//*代表html文件下的所有文件
                    .pipe(gulp.dest('./dist/html'))
            });
            gulp.task('copy-vendor',function(){
                gulp.src('./src/vendor/**/*.*')//**代表我要递归的选到所有的文件，*.*代表不管是什么文件
                    .pipe(gulp.dest('./dist/vendor'))
            });
            gulp.task('copy-assets',function(){
                gulp.src('./assets/**/*.*')
                    .pipe(gulp.dest('./dist/assets'))
            });
            //一个命令一个命令是非常繁琐的，可以将这四个命令进行合成,cmd中的相应路径中输入gulp copy就可以了
            gulp('copy',['copy-index','copy-html','copy-vendor','copy-assets']);

 

GULP的插件使用

     1.链接js    (gulp-concat)

        在需要安装的项目路径 cmd npm install gulp-concat,安装完成后，在 fulpfile.js中请求这个模块，在相应的路径中输入 gulp concat,并且在 html中引用 js的时候要写 dist文件夹中的路径，因为那是打包部署的文件，但不要去修改任何 dist中的文件，

              var concat = require('gulp-concat');//请求这个模块 

            

     2.压缩js    (gulp-uglify)

         cmd中安装  npm install gulp-uglify

            var uglify = require('gulp-uglify');//请求这个模块
            gulp.task('concat',function(){
                gulp.src('./src/script/**/*.js')
                    .pipe(concat('output.js'))//链接js，然后设置文件名
                    .pipe(uglify())//将连接之后的文件进行压缩
                    .pipe(gulp.dest('./dist/js'));
            })

 

     3.编译sass  (gulp-sass)

         npm install gulp-sass gulp-minify-css//两个一起安装

          var sass = require('gulp-sass'); 

     4.最小化css (gulp-minify-css)

          var minify = require('gulp-minify-css'); 

     5.文件重命名    (gulp-rename)

        有时候我们需要两份文件，一份未压缩，一份已经压缩，为了避免压缩过的文件覆盖掉为压缩的版本，所以需要重命名。 cmd安装命令 npm install gulp-rename

            gulp.task('sass',function(){
                gulp.src('./src/style/*.scss')
                .pipe(sass())
                .pipe(gulp.dest('./dist/style'))//编译后的文件保存
                .pipe(minify())//压缩
                .pipe(rename(function(filename){//因为源文件有多个，所以需要一个函数去重命名
                    filename.basename += '.min';//basename是表示源文件的名字
                }))
                .pipe(gulp.dest('./dist/style'));
            })

 

     6.监听 gulp.watch

    让 gulp更有效的运行， gulp有一个监听方法，监听任务中监听 sass文件， js文件等等，如果有任何文件发生变化， watch它就会自动实行某项任务

        gulp.task('watch',function(){
            gulp.watch('./src/index.html',['copy-index']);//监听src下的index.html有任何的变化，执行copy-index任务
            gulp.watch('./src/script/**/*.js',['concat']);
            gulp.watch('./src/vendor/**/*.*',['copy-vendor']);
            gulp.watch('./src/html/**/*.html',['copy-vendor']);
            gulp.watch('./assets/**/*.*',['copy-assets']);
            gulp.watch('./src/style/**/*.scss',['sass']);
        })

 

    7.热更新    (gulp-connect)

        当编辑我的代码时，进行了保存以后，我打开的所有相关文档都会得到更新，方便我们测试和开发

        实际上 gulp-cnnnect原本是用来建立服务器的，但也支持热更新

         cmd命令安装 npm install gulp-connect

        var connect = require('gulp-connect');
        gulp.task('server',function(){
            connect.server({//建立一个服务器
                root:'./dist',//建立两个参数，服务器的源地址
                livereload:true//这个服务器自动刷新true
            })
        })
        gulp.watch('./dist/**/*.*',['reload']);//这是gulp.task下的一个方法，监听dist下的所有文件，执行reload任务
        gulp.task('reload',function(){//如果文件有了任何改变，用watch来调用来进行自动的刷新
            gulp.src('./dist/*.html')
            .pipe(connect.reload());//调用方法，
        })
        gulp.task('default',['server','watch'],function(){//可以在cmd中直接输入gulp，这是默认的任务,回调两个任务，而不需要一个一个进行任务的运行
 

        })

 

     8.错误处理  (gulp-plumber)

        如果在后端调式的时候出现错误，会导致 cmd中 gulp正在运行监听和服务器的任务中断，这时候需要用到错误处理。

         cmd安装命令  npm install gulp-plumber

        var plumber = require('gulp-plumber');//调用gulp-plumber
 //比如在sass任务中加入错误处理
            gulp.task('sass',function(){
                gulp.src('./src/style/*.scss')
                .pipe(plumber())//加入错误处理，这样后台出错的时候，也不会导致监听服务中断
                .pipe(sass())//编译scss
                .pipe(gulp.dest('./dist/style'))
                .pipe(minify())
                .pipe(rename(function(filename){
                    filename.basename += '.min';//basename是表示源文件的名字
                }))
                .pipe(gulp.dest('./dist/style'));
            })