简介

EduSoho 采用 ES6 标准的 JavaScript 语法编写前端代码，Yarn 管理前端模块依赖，webpack 编译打包前端模块。

ES6

ES6为ECMAScript 6的简称，是ES标准委员会在2015年推出的JavaScript核心语言标准。相较它的上一个版本（ES5），提供了很多实用的新特性。如：引入了对Class类的支持；开始原生支持Module模块化；异步编程的又一种解决方案：Promise;对字符串、正则、函数、数组、对象等做了进一步的扩展。

Yarn

用来管理前端的模块依赖，同时相较Npm，它提供了依赖版本锁定的功能，避免了不同人本地开发依赖版本不同的问题。

Webpack

Webpack 是一个现代 JavaScript 应用程序的模块打包器(module bundler)。在Webpack里，前端所有类型的资源都被认为是模块，都可以经过它来编译打包。

目录结构

EduSoho 的前端目录分三个部分，EduSoho 主系统、插件、主题，下面是前端的目录结构。

  1. edusoho/
  2.   app/
  3.     Resources/
  4.       static-src/    <=== 主系统的前端目录
  5.         app/         <=== 功能模块前端目录
  6.         libs/        <=== 第三方前端模块二次封装
  7.         common/      <=== 通用组件
  8.   plugins/
  9.     ExamplePlugin/
  10.       Resources/
  11.         static-src/   <=== Example 插件的前端目录
  12.   web/
  13.     themes/
  14.       example/
  15.         static-src/   <=== Example 主题的前端目录
  16.     static-dist/      <=== 前端编译打包后的所在目录
  17.       app/            <=== app/Resources/static-src/app 的编译打包输出目录
  18.       exampletheme/   <=== web/themes/example/static-src 的编译输出目录
  19.       exampleplugin/  <=== plugins/ExamplePlugin/Resources/static-src 的编译输出目录
  20.       libs/           <=== 独立编译打包的第三方前端模块输出目录
  21.   node_modules/       <=== yarn 安装的前端模块目录
  22.   yarn.lock           <=== yarn 锁定前端模块依赖版本信息文件
  23.   webpack.config.js   <=== webpack 前端编译打包的配置文件
  24.   package.json        <=== 前端模块依赖声明文件
  25.   .webpack-watch.log  <=== 新入口文件监听日志
  26.   nodemon.json        <=== 触发Node服务重启的配置文件

目录说明：

  • EduSoho 主系统的前端模块目录为 app/Resources/static-src/。其下子目录：
    • app/：系统自身功能业务模块的前端目录。
    • lib/：需二次封装的第三方前端模块，独立编译构建的，放到此目录下，然后在 webpack.config.js 的 libs 键下声明。页面中通过 {%do script(PATH) %}的方式引入。
    • common：通用的前端业务模块目录。通过import引入，例如： import TestpaperBuilder from common/testpaper-builder。
  • 插件的前端目录位于插件目录下的 Resources/static-src 下。以 Example 插件为例，前端目录为 plugins/ExamplePlugin/Resources/static-src。
  • 主题的前端目录位于主题目录下的 static-src 目录下。以 Example 主题为例，前端目录为 web/themes/example/static-src 。
  • 前端模块编译打包后，输出到 web/static-dist 目录下。
  • 通过 yarn 安装的前端组件库位于 node_modules 目录下。
  • yarn.lock为 yarn 锁定前端模块依赖版本信息文件。
  • webpack.config.js 为 webpack 前端编译打包的配置文件。
  • package.json 为 前端模块依赖声明文件。

注意

为了实现新入口文件的监听，需手动在项目根目录下添加名为.webpack-watch.log的空文件。

前端依赖管理

EduSoho 使用 Yarn 来管理前端的依赖。

安装项目的全部依赖：

  1. yarn

新增依赖：

  1. yarn add [package] # 添加最新版本的依赖包
  2. yarn add [package]@[version]  # 添加指定版本的依赖包

移除依赖包：

  1. yarn remove [package]

详细使用指南，可参见 Yarn 官方文档。

编译构建

启动实时编译服务：

  1. npm run dev

该命令会读取配置文件webpack.config.js，启动服务后，默认会在本地启动3030端口的文件实时编译服务，当你在开发过程修改了前端代码后，会实时生效。

前端编译构建的详细使用指南，请参见本章内容的构建一节。