什么是模块引入的方式

Question

今天看见一个插件，文档上说模块加载的方式使用，一直用vue-cil开发，请问什么是模块引入？
https://gitee.com/whvse/treet...

Answer 1

首先应该理解这几个概念：

什么是模块?

模块是一个统称, 任何内容都可以看做一个模块(JS文件,CSS文件,图片文件等等);

为什么需要这种模块化?

可维护、可重用

现在已有模块化解决方案： (CMD)seajs , AMD(requirejs), CommonJS, ES6; 前面三种其实不属于ECM标准, ES6才是属于ECM推出模块化管理方案.

就以这个题为例：

    layui.config({
        base: 'module/'
    }).extend({
        treetable: 'treetable-lay/treetable'
    }).use(['treetable'], function () {
        var treetable = layui.treetable;
        
    });
    

上面写法等价下面一样的:

<link rel="stylesheet" href="./module/treetable-lay/treetable.css"/>
<script src="./module/treetable-lay/treetable.js"></script>

layui 包含模块化加载机制, 根据提供config(配置), 以及提供模块路径动态创建script标签方式去加载.

细心发现, 模块中实际只指定了 treetable, 但 CSS 也会被加载成功,这是在 treetable.js 中动态去加载 treetable.css 样式文件：

layui.link(layui.cache.base + 'treetable-lay/treetable.css');

这就是模块化好处, 不需要去关心 treetable.js 关联依赖了哪些内容, 也不要关心依赖内容加载的先后顺序,一切已 treetable.js 为入口;

首先 vue-cli 只是脚手架工具, 快速构建工程目录, 减少一些繁琐的配置.

至于说的模块引入, 例如

定义组件 treetable.vue :

    <template></template>
    <style>
        import './treetable.css';
    </style>
    <script>
        
    </script>

下面在其它地方把这个组件引入:

    import treetable from '@/components/treetable.vue' 
    import axios from 'axios'
    
    //或
    
    const axios = require('axios');
    

这就是模块引入, 前者 ES6(import、export) 模块化方案. 后者使用 NodeJS 中的 CommonJS(require、module.exports) 模块化方案.

axios : 模块名称(默认加载路径是在 node_modules 目录下找)
treetable: 模块名称

Answer 2

算是依赖注入，angular用的就是这种方式