test

package.json

@@ -20,26 +20,43 @@
     "type": "git",
     "url": "git+ssh://git@github.com/layui/layui.git"
   },
+  "type": "module",
+  "module": "./dist/layui.esm.js",
   "main": "dist/layui.js",
+  "sideEffects": [
+    "./dist/css/*"
+  ],
   "files": [
     "dist"
   ],
   "scripts": {
-    "build": "gulp",
+    "build": "rollup -c",
+    "build:legacy": "gulp",
+    "dev": "rollup -c -w",
     "release": "npm run build && npm rum release-zip",
     "release-zip": "gulp release"
   },
   "devDependencies": {
+    "@rollup/plugin-commonjs": "^25.0.0",
+    "@rollup/plugin-node-resolve": "^15.0.0",
+    "@rollup/plugin-terser": "^0.4.0",
+    "del": "^6.1.1",
     "gulp": "^4.0.2",
-    "gulp-uglify": "^3.0.2",
     "gulp-clean-css": "^4.3.0",
     "gulp-concat": "^2.6.1",
-    "gulp-replace": "^1.1.4",
     "gulp-header": "^2.0.9",
+    "gulp-replace": "^1.1.4",
     "gulp-sourcemaps": "^3.0.0",
+    "gulp-uglify": "^3.0.2",
     "gulp-zip": "^5.1.0",
-    "del": "^6.1.1",
+    "minimist": "^1.2.8",
-    "minimist": "^1.2.8"
+    "postcss-url": "^10.1.3",
+    "rollup": "^4.50.0",
+    "rollup-plugin-css-bundle": "^1.0.0",
+    "rollup-plugin-postcss": "^4.0.2",
+    "rollup-plugin-styles": "^4.0.0"
   },
-  "dependencies": {}
+  "dependencies": {
+    "jquery": "^3.7.1"
+  }
 }

rollup.config.mjs

@@ -0,0 +1,40 @@
+import resolve from "@rollup/plugin-node-resolve";
+import commonjs from "@rollup/plugin-commonjs";
+import terser from "@rollup/plugin-terser";
+import postcss from "rollup-plugin-postcss";
+import url from "postcss-url";
+
+export default [
+  {
+    input: "src/index.js",
+    output: {
+      file: "dist/layui.esm.js",
+      format: "es",
+    },
+    plugins: [
+      postcss({
+        minimize: false,
+        sourceMap: true,
+        extract: "css/layui.css",
+        plugins: [url({ url: "inline" })],
+      }),
+      resolve(),
+      commonjs(),
+    ],
+  },
+  {
+    input: "src/index.global.js",
+    output: {
+      file: "dist/layui.js",
+      format: "iife",
+      name: "layui",
+    },
+    plugins: [
+      postcss(),
+      resolve(),
+      commonjs({
+        requireReturnsDefault: "preferred",
+      }),
+    ],
+  },
+];

src/css/layui.css

@@ -49,12 +49,7 @@ a cite{font-style: normal;}
 /** 图标字体 **/
 @font-face {
   font-family: 'layui-icon';
-  src: url('../font/iconfont.eot?v=293');
+  src: url('../font/iconfont.woff?v=293') format('woff'),
-  src: url('../font/iconfont.eot?v=293#iefix') format('embedded-opentype'),
-       url('../font/iconfont.woff2?v=293') format('woff2'),
-       url('../font/iconfont.woff?v=293') format('woff'),
-       url('../font/iconfont.ttf?v=293') format('truetype'),
-       url('../font/iconfont.svg?v=293#layui-icon') format('svg');
 }
 
 .layui-icon{

src/index.global.js

@@ -0,0 +1,3 @@
+import layui from './index.js';
+
+export default layui;

src/index.js

@@ -0,0 +1,129 @@
+/**  
+ * Layui ES Module 统一入口  
+ */  
+  
+// 导入核心  
+import layui from './layui.js';  
+  
+// 导入所有模块  
+import lay from './modules/lay.js';  
+import layer from './modules/layer.js';  
+import laydate from './modules/laydate.js';  
+import laypage from './modules/laypage.js';  
+import laytpl from './modules/laytpl.js';  
+import form from './modules/form.js';  
+import upload from './modules/upload.js';  
+import dropdown from './modules/dropdown.js';  
+import transfer from './modules/transfer.js';  
+import tree from './modules/tree.js';  
+import table from './modules/table.js';  
+import treeTable from './modules/treeTable.js';  
+import tabs from './modules/tabs.js';  
+import element from './modules/element.js';  
+import rate from './modules/rate.js';  
+import colorpicker from './modules/colorpicker.js';  
+import slider from './modules/slider.js';  
+import carousel from './modules/carousel.js';  
+import flow from './modules/flow.js';  
+import util from './modules/util.js';  
+import code from './modules/code.js';  
+import jquery from 'jquery';  
+import component from './modules/component.js';  
+import './css/layui.css';
+import './css/modules/code.css'
+import './css/modules/laydate.css'
+import './css/modules/layer.css'
+  
+// 集成所有模块到 layui 对象  
+// layui.lay = lay;  
+// layui.layer = layer;  
+// layui.laydate = laydate;  
+// layui.laypage = laypage;  
+// layui.laytpl = laytpl;  
+// layui.form = form;  
+// layui.upload = upload;  
+// layui.dropdown = dropdown;  
+// layui.transfer = transfer;  
+// layui.tree = tree;  
+// layui.table = table;  
+// layui.treeTable = treeTable;  
+// layui.tabs = tabs;  
+// layui.element = element;  
+// layui.rate = rate;  
+// layui.colorpicker = colorpicker;  
+// layui.slider = slider;  
+// layui.carousel = carousel;  
+// layui.flow = flow;  
+// layui.util = util;  
+// layui.code = code;  
+// layui.jquery = jquery;  
+// layui.$ = jquery;  
+// layui.component = component;  
+
+const modules = {
+  lay,  
+  layer,  
+  laydate,  
+  laypage,  
+  laytpl,  
+  form,  
+  upload,  
+  dropdown,  
+  transfer,  
+  tree,  
+  table,  
+  treeTable,
+  tabs,
+  element,
+  rate,
+  colorpicker,
+  slider,
+  carousel,
+  flow,
+  util,
+  code,
+  jquery,
+  component,
+}
+
+// 兼容性处理，和 iife 版保持行为一致
+// 注册内置模块
+for (const key in modules) {
+  layui.define(function(exports){
+    exports(key, modules[key]);
+  })
+}
+layui['layui.all'] = 'layui.all';
+window.lay = lay;
+window.layer = layer;
+layui.$ = jquery; 
+
+export default layui;  
+
+export { 
+  layui,
+  lay,  
+  layer,  
+  laydate,  
+  laypage,  
+  laytpl,  
+  form,  
+  upload,  
+  dropdown,  
+  transfer,  
+  tree,  
+  table,  
+  treeTable,  
+  tabs,  
+  element,  
+  rate,  
+  colorpicker,  
+  slider,  
+  carousel,  
+  flow,  
+  util,  
+  code,  
+  jquery,  
+  jquery as $,
+  component  
+};

src/layui.js

@@ -4,9 +4,6 @@
  * MIT Licensed
  */
 
-(function(window) {
-  'use strict';
-
   // 便于打包时的字符压缩
   var document = window.document;
   var location = window.location;
@@ -1029,6 +1026,9 @@
     }
   };
 
-  // export layui
+  // 创建全局实例以保持兼容性  
-  window.layui = new Class();
+  const layui = new Class();  
-})(window);
+  
+  // ES Module 导出
+  export default layui;
+  export { layui };

src/modules/carousel.js

@@ -3,11 +3,9 @@
  * MIT Licensed
  */
 
-layui.define(['jquery', 'lay'], function(exports) {
+  import { layui } from '../layui.js';
-  "use strict";
+  import $ from 'jquery';
-
+  import lay from './lay.js';
-  var $ = layui.$;
-  var lay = layui.lay;
 
   var hint = layui.hint();
   var device = layui.device();
@@ -370,7 +368,5 @@ layui.define(['jquery', 'lay'], function(exports) {
     return new Class(options);
   };
 
-  exports(MOD_NAME, carousel);
+  export default carousel;
-});
+  export { carousel };
-
-

src/modules/code.js

@@ -3,15 +3,15 @@
  * Code 预览组件
  */
 
-layui.define(['lay', 'util', 'element', 'tabs', 'form'], function(exports){
+  import { layui } from '../layui.js';
-  "use strict";
+  import $ from 'jquery';
+  import lay from './lay.js';
+  import util from './util.js';
+  import element from './element.js';
+  import tabs from './tabs.js';
+  import form from './form.js';
+  import layer from './layer.js';
 
-  var $ = layui.$;
-  var util = layui.util;
-  var element = layui.element;
-  var tabs = layui.tabs;
-  var form = layui.form;
-  var layer = layui.layer;
   var hint = layui.hint();
 
   // 常量
@@ -62,7 +62,7 @@ layui.define(['lay', 'util', 'element', 'tabs', 'form'], function(exports){
   };
 
   // export api
-  exports('code', function(options, mode){
+  export function code(options, mode){
     options = $.extend(true, {}, config, options);
 
     // 返回对象
@@ -599,10 +599,6 @@ layui.define(['lay', 'util', 'element', 'tabs', 'form'], function(exports){
     }
 
     return ret;
-  });
+  }
-});
 
-// 若为源码版，则自动加载该组件依赖的 css 文件
+  export default code;
-if(!layui['layui.all']){
-  layui.addcss('modules/code.css?v=6', 'skincodecss');
-}

src/modules/colorpicker.js

@@ -3,11 +3,10 @@
  * 颜色选择组件
  */
 
-layui.define(['jquery', 'lay'], function(exports) {
+  import { layui } from '../layui.js';
-  "use strict";
+  import $ from 'jquery';
+  import lay from './lay.js';
 
-  var $ = layui.$;
-  var lay = layui.lay;
   var hint = layui.hint();
   var device = layui.device();
   var clickOrMousedown = (device.mobile ? 'click' : 'mousedown');
@@ -786,5 +785,5 @@ layui.define(['jquery', 'lay'], function(exports) {
     return thisModule.call(inst);
   };
 
-  exports(MOD_NAME, colorpicker);
+  export default colorpicker;
-});
+  export { colorpicker };

src/modules/component.js

@@ -3,14 +3,12 @@
  * Layui 2 组件构建器
  */
 
-layui.define(['jquery', 'lay'], function(exports) {
+  import { layui } from '../layui.js';
-  "use strict";
+  import $ from 'jquery';
-
+  import lay from './lay.js';
-  var $ = layui.$;
-  var lay = layui.lay;
 
   // export
-  exports('component', function(settings) {
+  export function component(settings) {
     // 默认设置
     settings = $.extend(true, {
       isDeepReload: false // 是否默认为深度重载
@@ -256,5 +254,5 @@ layui.define(['jquery', 'lay'], function(exports) {
     };
 
     return component;
-  });
+  }
-});
+  export default component;

src/modules/dropdown.js

@@ -3,12 +3,15 @@
  * 下拉菜单组件
  */
 
-layui.define(['jquery', 'laytpl', 'lay', 'util'], function(exports) {
-  "use strict";
 
-  var $ = layui.$;
+
-  var laytpl = layui.laytpl;
+  import { layui } from '../layui.js';
-  var util = layui.util;
+  import $ from 'jquery';
+  import laytpl from './laytpl.js';
+  import lay from './lay.js';
+  import util from './util.js';
+
+
   var hint = layui.hint();
   var device = layui.device();
   var clickOrMousedown = (device.mobile ? 'touchstart' : 'mousedown');
@@ -716,5 +719,6 @@ layui.define(['jquery', 'laytpl', 'lay', 'util'], function(exports) {
     return thisModule.call(inst);
   };
 
-  exports(MOD_NAME, dropdown);
+  export default dropdown;
-});
+  export { dropdown };
+

src/modules/element.js

@@ -3,10 +3,9 @@
  * 常用元素操作组件
  */
 
-layui.define('jquery', function(exports) {
+  import { layui } from '../layui.js';
-  'use strict';
+  import $ from 'jquery';
 
-  var $ = layui.$;
   var hint = layui.hint();
   var device = layui.device();
 
@@ -693,6 +692,6 @@ layui.define('jquery', function(exports) {
   // dom.on('click', call.hideTabMore); // 隐藏展开的 Tab
   $(window).on('resize', call.tabAuto); // 自适应
 
-  exports(MOD_NAME, element);
+  export default element;
-});
+  export { element };
 

src/modules/flow.js

@@ -2,11 +2,9 @@
  * flow 流加载组件
  */
 
+  import { layui } from '../layui.js';
+  import $ from 'jquery';
 
-layui.define('jquery', function(exports) {
-  "use strict";
-
-  var $ = layui.$;
   var Flow = function(options) {};
   var ELEM_MORE = 'layui-flow-more';
   var ELEM_LOAD = '<i class="layui-anim layui-anim-rotate layui-anim-loop layui-icon ">&#xe63e;</i>';
@@ -200,5 +198,7 @@ layui.define('jquery', function(exports) {
   }
 
   //暴露接口
-  exports('flow', new Flow());
+  const flow = new Flow();
-});
+  export default flow;
+  export { flow };
+

src/modules/form.js

@@ -2,12 +2,12 @@
  * form 表单组件
  */
 
-layui.define(['lay', 'layer', 'util'], function(exports){
+  import { layui } from '../layui.js';
-  "use strict";
+  import $ from 'jquery';
+  import layer from './layer';
+  import util from './util';
+  import lay from './lay.js';
 
-  var $ = layui.$;
-  var layer = layui.layer;
-  var util = layui.util;
   var hint = layui.hint();
   var device = layui.device();
 
@@ -1542,5 +1542,5 @@ layui.define(['lay', 'layer', 'util'], function(exports){
   $dom.on('submit', ELEM, submit)
   .on('click', '*[lay-submit]', submit);
 
-  exports(MOD_NAME, form);
+export { form };
-});
+export default form;

src/modules/lay.js

@@ -1,8 +1,6 @@
 
 /** lay 基础模块 | MIT Licensed */
-
+import { layui } from '../layui.js';
-(function(window) {
-  "use strict";
 
   var MOD_NAME = 'lay'; // 模块名
   var document = window.document;
@@ -980,14 +978,5 @@
     });
   };
 
-  // export
+export default lay;
-  window.lay = lay;
+export { lay };
-
-  // 输出为 layui 模块
-  if(window.layui && layui.define){
-    layui.define(function(exports){
-      exports(MOD_NAME, lay);
-    });
-  }
-
-})(window);

src/modules/laydate.js

@@ -1,7 +1,8 @@
 /** laydate 日期与时间控件 | MIT Licensed */
-// @ts-expect-error
+
-(function(window, document) {
+import { layui } from '../layui.js';
-  "use strict";
+import $ from 'jquery';
+import lay from './lay.js';
 
   var isLayui = window.layui && layui.define;
   var ready = {
@@ -2747,23 +2748,8 @@
     return new Date(thisDate.getTime() - 1000*60*60*24).getDate();
   };
 
-  //加载方式
-  isLayui ? (
-    laydate.ready()
-    ,layui.define('lay', function(exports){ //layui 加载
-      laydate.path = layui.cache.dir;
-      ready.run(lay);
-      exports(MOD_NAME, laydate);
-    })
-  ) : (
-    (typeof define === 'function' && define.amd) ? define(function(){ //requirejs 加载
-      ready.run(lay);
-      return laydate;
-    }) : function(){ //普通 script 标签加载
       laydate.ready();
-      ready.run(window.lay);
+      ready.run(lay);
-      window.laydate = laydate;
-    }()
-  );
 
-})(window, window.document);
+      export { laydate };
+      export default laydate;

src/modules/layer.js

@@ -2,12 +2,10 @@
  * layer
  * 通用 Web 弹出层组件
  */
-//@ts-ignore
+import { layui } from '../layui.js';
-(function(window, undefined) {
+import $ from 'jquery';
-"use strict";
 
 var isLayui = window.layui && layui.define;
-var $;
 var win;
 var ready = {
   getPath: function(){
@@ -1868,7 +1866,7 @@ layer.photos = function(options, loop, key){
 
 // 主入口
 ready.run = function(_$){
-  $ = _$;
+  var $ = _$;
   win = $(window);
 
   // 移动端兼容性处理
@@ -1894,25 +1892,8 @@ ready.run = function(_$){
   };
 };
 
-// 加载方式
-window.layui && layui.define ? (
-  layer.ready(),
-  layui.define(['jquery','lay'], function(exports){ // layui
-    layer.path = layui.cache.dir;
-    ready.run(layui.$);
-
-    // export api
-    window.layer = layer;
-    exports('layer', layer);
-  })
-) : (
-  (typeof define === 'function' && define.amd) ? define(['jquery'], function(){ // requirejs
-    ready.run(window.jQuery);
-    return layer;
-  }) : function(){ // 普通 script 标签引入
     layer.ready();
-    ready.run(window.jQuery);
+    ready.run($);
-  }()
-);
 
-})(window);
+    export { layer };
+    export default layer;

src/modules/laypage.js

@@ -2,8 +2,7 @@
  * laypage 分页组件
  */
 
-layui.define(function(exports) {
+import { layui } from '../layui.js';
-  "use strict";
 
   var doc = document;
   var id = 'getElementById';
@@ -340,5 +339,5 @@ layui.define(function(exports) {
     }
   }
 
-  exports(MOD_NAME, laypage);
+  export { laypage };
-});
+  export default laypage;

src/modules/laytpl.js

@@ -3,8 +3,6 @@
  * 轻量级通用模板引擎
  */
 
-(function(global) {
-  'use strict';
 
   var MOD_NAME = 'laytpl';
 
@@ -494,15 +492,5 @@
   };
 
   // 输出接口
-  typeof layui === 'object' ? layui.define(function(exports) { // Layui
+  export { laytpl };
-    exports(MOD_NAME, laytpl);
+  export default laytpl;
-  }) : (
-    typeof module === 'object' && typeof exports === 'object'
-      ? module.exports = laytpl // CommonJS
-    : (
-      typeof define === 'function' && define.amd ? define(function() { // RequireJS
-        return laytpl;
-      }) : global.laytpl = laytpl // 单独引入
-    )
-  );
-})(this);

src/modules/rate.js

@@ -3,14 +3,12 @@
  * 评分组件
  */
 
-layui.define('component', function(exports) {
+  import lay from './lay.js';
-  "use strict";
+  import componentBuilder  from './component.js';
-
+  import $ from 'jquery';
-  var $ = layui.$;
-  var lay = layui.lay;
 
   // 创建组件
-  var component = layui.component({
+  var component = componentBuilder({
     name: 'rate',
 
     // 默认配置
@@ -232,5 +230,5 @@ layui.define('component', function(exports) {
     });
   };
 
-  exports(CONST.MOD_NAME, component);
+  export { component as rate };
-});
+  export default component;

src/modules/slider.js

@@ -2,11 +2,9 @@
  * slider 滑块组件
  */
 
-layui.define(['jquery', 'lay'], function(exports) {
+import {layui} from '../layui.js';
-  'use strict';
+import $ from 'jquery';
-
+import lay from './lay.js';
-  var $ = layui.$;
-  var lay = layui.lay;
 
   // 外部接口
   var slider = {
@@ -504,5 +502,5 @@ layui.define(['jquery', 'lay'], function(exports) {
     return thisSlider.call(inst);
   };
 
-  exports(MOD_NAME, slider);
+  export { slider };
-})
+  export default slider;

src/modules/table.js

@@ -3,16 +3,15 @@
  * 表格组件
  */
 
-layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports) {
+  import { layui } from '../layui.js';
-  "use strict";
+  import $ from 'jquery';
+  import lay from './lay.js';
+  import laytpl from './laytpl.js';
+  import laypage from './laypage.js';
+  import layer from './layer.js';
+  import form from './form.js';
+  import util from './util.js';
 
-  var $ = layui.$;
-  var lay = layui.lay;
-  var laytpl = layui.laytpl;
-  var laypage = layui.laypage;
-  var layer = layui.layer;
-  var form = layui.form;
-  var util = layui.util;
   var hint = layui.hint();
   var device = layui.device();
 
@@ -3351,5 +3350,5 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports) {
     table.init();
   });
 
-  exports(MOD_NAME, table);
+  export { table };
-});
+  export default table;

src/modules/tabs.js

@@ -3,13 +3,12 @@
  * 标签页组件
  */
 
-layui.define('component', function(exports) {
+import { layui } from '../layui.js';
-  'use strict';
+import $ from 'jquery';
-
+import componentBuilder  from './component.js';
-  var $ = layui.$;
 
   // 创建组件
-  var component = layui.component({
+  var component = componentBuilder({
     name: 'tabs', // 组件名
 
     // 默认配置
@@ -817,5 +816,5 @@ layui.define('component', function(exports) {
     component.render();
   });
 
-  exports(component.CONST.MOD_NAME, component);
+  export { component as tabs };
-});
+  export default component;

src/modules/transfer.js

@@ -2,12 +2,10 @@
  * transfer 穿梭框组件
  */
 
-layui.define(['laytpl', 'form'], function(exports) {
+import { layui } from '../layui.js';
-  "use strict";
+import $ from 'jquery';
-
+import laytpl from './laytpl.js';
-  var $ = layui.$;
+import form from './form.js';
-  var laytpl = layui.laytpl;
-  var form = layui.form;
 
   // 模块名
   var MOD_NAME = 'transfer';
@@ -515,5 +513,5 @@ layui.define(['laytpl', 'form'], function(exports) {
     return thisModule.call(inst);
   };
 
-  exports(MOD_NAME, transfer);
+  export { transfer};
-});
+  export default transfer;

src/modules/tree.js

@@ -2,13 +2,10 @@
  * tree 树组件
  */
 
-layui.define(['form','util'], function(exports) {
+  import { layui } from '../layui.js';
-  "use strict";
+  import $ from 'jquery';
-
+  import form from './form.js';
-  var $ = layui.$;
+  import util from './util.js';
-  var form = layui.form;
-  var layer = layui.layer;
-  var util = layui.util;
 
   // 模块名
   var MOD_NAME = 'tree';
@@ -861,5 +858,5 @@ layui.define(['form','util'], function(exports) {
     return thisModule.call(inst);
   };
 
-  exports(MOD_NAME, tree);
+  export { tree};
-})
+  export default tree;

src/modules/treeTable.js

@@ -3,12 +3,11 @@
  * 树表组件
  */
 
-layui.define(['table'], function (exports) {
+  import { layui } from '../layui.js';
-  "use strict";
+  import $ from 'jquery';
+  import form from './form.js';
+  import table from './table.js';
 
-  var $ = layui.$;
-  var form = layui.form;
-  var table = layui.table;
   var hint = layui.hint();
 
   // api
@@ -2150,5 +2149,5 @@ layui.define(['table'], function (exports) {
     return thisTreeTable.call(inst);
   };
 
-  exports(MOD_NAME, treeTable);
+  export { treeTable };
-});
+  export default treeTable;

src/modules/upload.js

@@ -3,12 +3,11 @@
  * 上传组件
  */
 
-layui.define(['lay', 'layer'], function(exports) {
+  import { layui } from '../layui.js';
-  "use strict";
+  import $ from 'jquery';
+  import lay from './lay.js';
+  import layer from './layer.js';
 
-  var $ = layui.$;
-  var lay = layui.lay;
-  var layer = layui.layer;
   var device = layui.device();
 
   // 模块名
@@ -845,6 +844,5 @@ layui.define(['lay', 'layer'], function(exports) {
     return thisModule.call(inst);
   };
 
-  exports(MOD_NAME, upload);
+  export { upload };
-});
+  export default upload;
-

src/modules/util.js

@@ -2,10 +2,9 @@
  * util 工具组件
  */
 
-layui.define('jquery', function(exports) {
+import { layui } from '../layui.js';
-  "use strict";
+import $ from 'jquery';
 
-  var $ = layui.$;
   var hint = layui.hint();
 
   // 外部接口
@@ -473,6 +472,5 @@ layui.define('jquery', function(exports) {
   // 兼容旧版
   util.event = util.on;
 
-  // 输出接口
+  export { util };
-  exports('util', util);
+  export default util;
-});