客服系统从Require.js到Webpack

zhangyucha0 发布于2019-08-20 19:09 / 1780人阅读

摘要：客服系统之前都是用进行模块化编程，并使用相应的打包文件，本次迁移成。除了组件化开发打包发布，还有性能优化工程化管理需要考虑，而并不擅长做这些事情，如等。

客服系统之前都是用Require.js 2.2.0进行模块化编程，并使用相应的r.js打包js文件，本次迁移成Webpack3.3.0。

为什么迁移

项目前期，require.js可以很好的解决需求，但是随着项目成长到具有上百个JS文件，越来越多的工作需要处理。除了组件化开发、打包发布，还有性能优化、工程化管理需要考虑，而require.js并不擅长做这些事情，如tree shaking, hot reloading, code splitting等。

令一方面现有项目的CSS打包、CSS预处理、文件合并等自动化构建也需要借助gulp或者shell脚本等工具实现，而这些工作，使用更先进生产力的webpack就可以全部完成。

Require.js写法

首先需要了解使用require.js的js文件的写法，baseUrl是默认路径，paths中定义了各个路径的别名，然后使用标准的AMD语法引用定义过的模块。

</>复制代码 
requirejs.config({
    //设定为git repo的dev路径;
    baseUrl: "../../../",
    paths: {
        test: "js/module/test",
        main : "js/module/main",
        model : "js/model",
        view : "js/view",
        api : "js/model",
        artTemplate: "js/3rdParty/artTemplate",
        util: "js/util",
        // "bootstrap" : "http://boss.static.xiaomi.net/common/bootstrap/3.3.4-fix/bootstrap",
        "bootstrap" : "js/3rdParty/bootstrap/3.3.4-fix/bootstrap",
        "jquery" : "http://boss.static.xiaomi.net/common/jquery/1.11.2/jquery",
        "jquery.validate" : "http://boss.static.xiaomi.net/common/jquery.validate/1.13.1/jquery.validate"
    }
});
// 注意:
// require选定某一个模块的baseUrl，是基于git repo的dev路径的;
require(["jquery", "bootstrap", "main/_main"], function( $, bt, _main ){
    _main.run();
});

开始迁移

Webpack本身是支持Amd的，所以不需要修改各个js组件的语法，只需要修改对应入口文件的require.js的配置即可。
修改后如下：

</>复制代码 
import _main from "main/_main";
_main.run();

相应的paths对应到了webpack中的resolve中：

</>复制代码 
resolve: {
  extensions: [" ", ".js", ".css"],
  modules: [path.join(__dirname, "dev/")],
  alias: {
    test: path.join(__dirname, "dev/js/module/test"),
    main: path.join(__dirname, "dev/js/module/main"),
    libs : path.join(__dirname, "dev/js/3rdParty"),
    model: path.join(__dirname, "dev/js/model"),
    view: path.join(__dirname, "dev/js/view"),
    api: path.join(__dirname, "dev/js/model"),
    artTemplate: path.join(__dirname, "dev/js/3rdParty/artTemplate"),
    util: path.join(__dirname, "dev/js/util"),
    jquery: path.join(__dirname, "dev/js/3rdParty/jquery/1.11.2/jquery"),
    bootstrap: path.join(__dirname, "dev/js/3rdParty/bootstrap/3.3.4-fix/bootstrap"),
    "jquery.validate": path.join(__dirname, "dev/js/3rdParty/jquery.validate/1.13.1/jquery.validate"),
    "datatables.css": path.join(__dirname,"dev/css/3rdparty_libs/datatables/1.10.13/dataTables.bootstrap"),
  },
}

项目中有大量依赖jQuery的第三方库，所以需要把jQuery暴露到全局中

</>复制代码 
{
  test: /jquery.js/,
  use: [{
    loader: "expose-loader",
      options: "$"
  },
  {
    loader: "expose-loader",
    options: "jQuery"
  }]
},

总结

项目使用webpack替换掉原有繁杂的shell脚本打包文件，移除require.js，取得了很好的效果，且方便日常维护扩展。

云服务器 GPU云服务器从0到1搭建视频通话系统云计算与分布式系统从并行处理到物联网 require.js 从域名到网站

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/85215.html

Javascript模块化及webpack基本介绍

摘要：可维护性根据定义，每个模块都是独立的。良好设计的模块会尽量与外部的代码撇清关系，以便于独立对其进行改进和维护。这标志模块化编程正式诞生。的模块系统，就是参照规范实现的。对象就代表模块本身。 javascript模块化及webpack基本介绍 JavaScript 模块化发展历程什么是模块化 ? 为什么要做Javascript模块化? JavaScript 模块化发展历程什么是模...

figofuture 2019-08-21 18:00 评论0 收藏0
前端模块化杂记

摘要：入口模块返回的赋值给总结在剖析了整体的流程之后，可以看到相关的技术细节还是比较清晰的，学无止境引用混合使用详解的语法前端模块化规范前言 CMDAMD简介 Commonjs简介 Module简介 Common和Module的区别 Module与webpack Module与Babel 一些问题总结引用前言前端模块化在近几年层出不穷，有Node的CommonJs,也有属于cl...

GitCafe 2019-08-26 13:29 评论0 收藏0
Javascript 模块化指北

摘要：打包出来的代码快照如下，注意看注释中的时序实际上，的处理同相差无几，只是在定义模块和引入模块时会去处理标识，从而兼容其在语法上的差异。前言随着 Web 技术的蓬勃发展和依赖的基础设施日益完善，前端领域逐渐从浏览器扩展至服务端（Node.js），桌面端（PC、Android、iOS），乃至于物联网设备（IoT），其中 JavaScript 承载着这些应用程序的核心部分，随着其规模化和...

enali 2019-08-23 11:44 评论0 收藏0
vue开发看这篇文章就够了

摘要：注意此处获取的数据是更新后的数据，但是获取页面中的元素是更新之前的钩子函数说明组件已经更新，所以你现在可以执行依赖于的操作。钩子函数说明实例销毁 Vue -渐进式JavaScript框架介绍 vue 中文网 vue github Vue.js 是一套构建用户界面(UI)的渐进式JavaScript框架库和框架的区别我们所说的前端框架与库的区别？ Library 库，本质上是一...

fsmStudy 2019-08-21 18:37 评论0 收藏0