esm前端模塊化

ESM（ECMA Script Modules）

AMD：

    異步模塊定義，咱們引用 js文件都是使用 script標籤來引用的，這種一般狀況下都是異步引用，咱們通常在網絡中引用文件，引用完以後才能進行解析和運行。咱們請求一個模塊也是同樣，若是這個模塊返回的時間不固定，咱們只能異步引用的方式，讓模塊導入以後在開始運行。

    1.Requirejs引入

         data-main

        能夠建立  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的入口文件

        

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