EDUSOHO踩坑笔记之十九：前端开发

EDUSOHO踩坑笔记之十九：前端开发

• 前端开发
  • 引入第三方类库
    • 注意
  • 目录别名
  • 主系统的前端开发
    • 注意
  • 插件、主题的前端开发
  • 最佳实践

前端开发

引入第三方类库

系统引入第三方的前端模块，通常我们采用独立编译打包的方式。独立编译打包的类库需要在 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']) %}

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

目录别名

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

别名	对应目录
app	app/Resources/static-src/app
libs	app/Resources/static-src/libs
common	app/Resources/static-src/common
custombundle	src/CustomBundle/Resources/static-src
{CODE}plugin	plugins/{CODE}/Resources/static-src
{CODE}theme	web/themes/{CODE}/Resources/static-src
nodemodules	node_modules

(注：{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等媒体文件目录。

注意

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

插件、主题的前端开发

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

	源文件目录	输出目录
插件	plugins/{CODE}/Resources/static-src	web/static-dist/{CODE}plugin
主题	web/themes/{CODE}/Resources/static-src	web/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、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';