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'));
            })