开发

引入第三方类库

系统引入第三方的前端模块，通常我们采用独立编译打包的方式。独立编译打包的类库需要在 webpack.config.js 中的 libs 键下声明。

module.exports = {
  // ...
  libs: {
    'vendor': ['libs/base.js'], //可以是一个js文件,
    'html5shiv': ['html5shiv'], // 也可以是一个 npm 依赖包
    'fix-ie': ['console-polyfill', 'respond-js'], // 也可以声明多个，会自动合并
    'jquery-validation': ['libs/js/jquery-validation.js'],
    // ...
  },
  // ...
}

配置说明：

• libs 是一个对象，键为编译打包后的文件名，值为需编译的文件，可以为 JavaScript 文件、NPM 依赖包的名字，也可以指定多个文件或 NPM 包名。
• 其中 libs/base.js 中声明了系统的前端基础模块，即几乎每个页面需要用到的类库，例如 jQuery、bootstrap。
• libs/ 开头的前端文件可以在 app/Resources/static-src/libs 下找到。

• 编译打包后的文件，会输出到 web/static-dist/libs 目录下。在页面中通过 Twig 的 script 函数引入，例如：

  {%do script(['libs/base.js']) %}
  

目录别名

目录别名用于方便引用前端文件。

(注：{CODE}为插件、主题的编码。)

例子：

import Autocomplete from 'common/autocomplete';

主系统的前端开发

EduSoho 主系统自身功能页面模块的前端模块文件位于 app/Resources/static-src/app 下，目录结构如下：

edusoho
  app/Resources/static-src/app/
    js/
      {PAGE_A}/
        index.js
      {PAGE_B}/
        index.js
      main.js
    less/
      main.less
    less/
    img/
    fonts/
    media/

目录结构说明：

• js/main.js 为所有页面都需要用到的 JavaScript。
• js/{PAGE_A}/index.js 为页面级别的 JavaScript 文件，在页面中通过 {%do script(.....) %} 的方式引入。
• less/main.less 为页面的样式文件，会编译打包到 web/static-dist/css 目录下。
• img 为图片文件目录。
• font 为字体文件目录。
• media 为视频、PPT等媒体文件目录。

插件、主题的前端开发

插件、主题的前端开发类似，唯一的区别是各自的源文件目录，以及编译打包输出目录不同，见下表。

(注：{CODE}为插件、主题的编码。)

目录结构如下：

edusoho/
  /plugins/{CODE}Plugin/Resources/static-src/ (or /web/themes/{CODE}/static-src/)
    js/
      {PAGE_A}/
        index.js
      {PAGE_B}/
        index.js
      main.js
    less/
      main.less
    img/
    fonts/

• js/main.js 为当前插件(主题)下，所有页面都需要用到的 JavaScript 文件。
• js/{PAGE_A}/index.js 为页面级别的 JavaScript 文件，在页面中通过 {%do script(.....) %} 的方式引入。
• less/main.less 为页面的样式文件，会编译打包输出到 web/static-dist/{CODE}plugin/css( or web/static-dist/{code}theme/css) 目录下。
• img 为图片文件目录。
• fonts 为字体文件目录。

最佳实践

依赖包的样式引入

//引入less、css时前面需加'~'，以便让loader识别alias别名
@import '~nodemodules/xx/xxx.less';

模块组件样式引入

不希望单独打包出css文件的,以下面形式引入:

import '!style-loader?insertAt=top!css-loader!less-loader!xxx.less';

import '!style-loader?insertAt=top!css-loader!xxx.css';