commonjs

  • cjs // commonjs

    • 同步
    • Node 应用由模块组成,采用 CommonJS 模块规范。
    • commonjs 每个文件就是一个模块,有自己的作用域。在一个文件里面定义的变量、函数、类,都是私有的,对其他文件不可见。
    • CommonJS规范加载模块是同步的,也就是说,只有加载完成,才能执行后面的操作
    • 由于Node.js主要用于服务器编程,模块文件一般都已经存在于本地硬盘,所以加载起来比较快,不用考虑非同步加载的方式,所以CommonJS规范比较适用
    // rollup.config.js
    export default {
       input: 'src/1.js',
       output: {
           file: 'dist/cjs.js',
            format: 'cjs',
       }
    }
    

    打包之后

    module.exports = {};
    
  • amd:

    • AMD规范则是非同步加载模块,允许指定回调函数。
    • 浏览器环境,要从服务器端加载模块,这时就必须采用非同步模式,因此浏览器端一般采用AMD规范。
    // rollup.config.js
    export default {
       input: 'src/1.js',
       output: {
           file: 'dist/amd.js',
           format: 'amd',
       }
    }
    

    打包之后

    define(function () { 'use strict';
      return {}
    });
    
  • es

    // rollup.config.js
    export default {
      input: 'src/1.js',
      output: {
          file: 'dist/es.js',
          format: 'es',
      }
    }
    

    打包之后文件

    export default {};
    
  • iife

    // rollup.config.js
    export default {
     input: 'src/1.js',
     output: {
         file: 'dist/iife.js',
         format: 'iife',
         name: 'iii'
     }
    }
    

    打包后的文件

    var iii = (function () {
        
        return {};
    
    }());
    
  • umd

    • JavaScript 模块的通用模块定义 (UMD), 可以在任何地方工作,无论是在客户端、服务器还是其他地方。
    • UMD 模式通常试图提供与当今最流行的脚本加载器(例如 RequireJS 等)的兼容性。在许多情况下,它使用AMD作为基础,并添加了特殊的外壳来处理CommonJS兼容性。
    • https://github.com/umdjs/umd
    // rollup.config.js
    export default {
      input: 'src/1.js',
      output: {
          file: 'dist/umd.js',
          format: 'umd',
          name: 'abc'
      }
    }
    

    打包之后的文件

    (function (global, factory) {
      typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
      typeof define === 'function' && define.amd ? define(factory) :
      (global.abc = factory());
    }(this, (function () { 'use strict';
    
    return {};
    })));
    
    
  • rollup

    • plugins
     import babel from 'rollup-plugin-babel'; // es6 转 es5
    import  obfuscatorPlugin  from  'rollup-plugin-javascript-obfuscator';//  汇总插件混淆器
    
    plugins: [
        babel(),
        obfuscatorPlugin ( { 
           compact : true  // 参数名混淆
          renameGlobals: true // 全局变量名函数名混淆
        } ) 
    ]
    
  • uglify()

    import {uglify} from 'rollup-plugin-uglify';
    
    plugins: [
      uglify({
            toplevel: true, // 函数名混淆
        }) // 无参数这样只是压缩,去掉空格、注释、换行,函数参数名替换为无意义的字母,for循环参数替换为无意义字母
    ]
    
  • terser: 函数名参数名,混淆

  • https://segmentfault.com/a/1190000022490059

posted @ 2021-07-01 19:41  Running00  阅读(96)  评论(0编辑  收藏  举报