esm前端模块化

时间 2019-11-13

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