Skip to content

开发

引入第三方类库

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

javascript
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 中声明了系统的前端基础模块,即几乎每个页面需要用到的类库,例如 jQuerybootstrap

  • libs/ 开头的前端文件可以在 app/Resources/static-src/libs 下找到。

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

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

注意

目前,只有 EduSoho 本身的开发以及定制开发才能通过以上方式引入第三方类库。插件、主题的开发如需引入第三方类库,可通过将类库复制到插件、主题的 js 目录下。

目录别名

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

别名对应目录
appapp/Resources/static-src/app
libsapp/Resources/static-src/libs
commonapp/Resources/static-src/common
custombundlesrc/CustomBundle/Resources/static-src
{CODE}pluginplugins/{CODE}/Resources/static-src
{CODE}themeweb/themes/{CODE}/Resources/static-src
nodemodulesnode_modules

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

例子:

javascript
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等媒体文件目录。

注意

img 图片文件目录,在前端构建时,会自动复制到对应的输出目录下。

插件、主题的前端开发

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

源文件目录输出目录
插件plugins/{CODE}/Resources/static-srcweb/static-dist/{CODE}plugin
主题web/themes/{CODE}/Resources/static-srcweb/static-dist/{CODE}theme

(注:{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
//引入less、css时前面需加'~',以便让loader识别alias别名
@import '~nodemodules/xx/xxx.less';

模块组件样式引入

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

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

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