开发

引入第三方类库

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