EDUSOHO踩坑笔记之十七：前端开发之概述

EDUSOHO踩坑笔记之十七：前端开发之概述

• 概述
  • 目录结构
    • 注意
  • 前端依赖管理
  • 编译构建

概述

    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 键下声明。页面中通过 {%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端口的文件实时编译服务，当你在开发过程修改了前端代码后，会实时生效。

前端编译构建的详细使用指南，请参考前端相关构建一节的内容。