简介

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.jslibs 键下声明。页面中通过 {%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 来管理前端的依赖。

安装项目的全部依赖:

yarn

新增依赖:

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

移除依赖包:

yarn remove [package]

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

编译构建

启动实时编译服务:

npm run dev

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

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

results matching ""

    No results matching ""