简介

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 主系统、插件、主题，下面是前端的目录结构。

edusoho/
  app/
    Resources/
      static-src/    <=== 主系统的前端目录
        app/         <=== 功能模块前端目录
        libs/        <=== 第三方前端模块二次封装
        common/      <=== 通用组件
  plugins/
    ExamplePlugin/
      Resources/
        static-src/   <=== Example 插件的前端目录
  web/
    themes/
      example/
        static-src/   <=== Example 主题的前端目录
    static-dist/      <=== 前端编译打包后的所在目录
      app/            <=== app/Resources/static-src/app 的编译打包输出目录
      exampletheme/   <=== web/themes/example/static-src 的编译输出目录
      exampleplugin/  <=== plugins/ExamplePlugin/Resources/static-src 的编译输出目录
      libs/           <=== 独立编译打包的第三方前端模块输出目录
  node_modules/       <=== yarn 安装的前端模块目录
  yarn.lock           <=== yarn 锁定前端模块依赖版本信息文件
  webpack.config.js   <=== webpack 前端编译打包的配置文件
  package.json        <=== 前端模块依赖声明文件
  .webpack-watch.log  <=== 新入口文件监听日志
  nodemon.json        <=== 触发Node服务重启的配置文件

目录说明：

EduSoho 主系统的前端模块目录为 app/Resources/static-src/。其下子目录：
- app/：系统自身功能业务模块的前端目录。
- lib/：需二次封装的第三方前端模块，独立编译构建的，放到此目录下，然后在 webpack.config.js 的 libs 键下声明。页面中通过 {% raw %}{%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 来管理前端的依赖。

安装项目的全部依赖：

bash

yarn

新增依赖：

bash

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

移除依赖包：

bash

yarn remove [package]

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

编译构建

启动实时编译服务：

npm run dev

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

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

简介 ​

目录结构 ​

前端依赖管理 ​

编译构建 ​

简介

目录结构

前端依赖管理

编译构建