旧多页应用项目的重构

一些感叹

利用最近自己写的一个针对多页应用而写的脚手架,对自己第一个写的项目进行重构。哈哈,那个时候刚入门前端,还不知道有webpack这种东西,写的是那种最最古老的Bootstrap + jquery项目,那时还不懂什么是打包… 经过半年来的学习,成长到现在,回头看看自己第一次的项目,还真是惨不忍睹啊~ 好吧,不啰嗦了,开始吧。

看看项目目录结构

先看看以前这个项目长什么样子….

css ————
      | —— introduction.css
      | —— index.css
      | —— owl.carousel.min.css
js  ————
      | —— initIntro.js
      | —— initScroller.js
      | —— index.js
      | —— iscroll-probe.js
      | —— owl.carousel.min.js
img ————
      .........
index.html
introduction.html

一共就只有2个页面,一个主页index和一个详情介绍页introduction。 看着这个目录结构此刻的心情(/ω\)

  1. 首先第三方库的css和js文件应该集中放在一个lib文件夹下。把业务相关的东西和无关的东西分开
  2. 页面和其相关的css和js应该都集中在一个文件夹中,把页面看作一个模块。在后期的维护才会更加方便,起码你不用在一众多的js文件中寻找你所要的。

开始

目录的改进

  • 先在这里下载这个脚手架。npm install安装所有依赖后-
  • 执行npm run create index introduction 创建2个目录,把旧项目的文件拷到对应文件夹,并按照上述内容,把第三方库都放在一个lib文件夹下。并把images文件夹存放在src/static下。
  • 经过一番重命名后,感觉自己那时文件的名字取的确实是有点那啥…. 不过这也显得自己有所成长吧。
  • 现在的目录结构

    static           //    静态资源的存放
    | ———— imgs
    
    src 
    | ———— views
    |        | ———— index
    |        |        | ———— index.html
    |        |        | ———— index.css
    |        |        | ———— index.js
    |        |        | ———— initScroller.js
    |        | ———— introduction
    |                 | ———— index.html
    |                 | ———— index.css
    |                 | ———— index.js
    | ———— lib
            | ———— owl.carousel.min.css
            | ———— owl.carousel.min.js
            | ———— iscroll-probe.js

jscss的引入

  • 旧项目大部分都是使用<script>标签引入脚本,用<link>引入样式。同时这个旧项目也有用到bootcss的cdn。这里还是比较推荐使用cdn的,毕竟可以减少打包后文件的大小。cdn引入相信大家都会,就不说了。
  • 使用import去引入相关的jscss文件,脚手架已集成了各种loader。
  • 对于一些不支持CommonJS的第三方库,要么你去改造它,要么只好直接用<script>引入吧(尽管很不愿意)
  • 目录结构的更改,所有的路径引用肯定都已经出错了。这些就自行去修复吧。
  • 这个例子里,我们不用cdn 我们通过npm安装JQueryBootstrap,但是v3版本不支持模块化,那么我们趁此机会入坑v4-beta

入坑JQueryBootstrap v4

Bootstrap-v4 官方文档

npm install jquery
npm install popper.js
npm install bootstrap@4.0.0-beta

官方文档中有用到webpack.ProvidePlugin,使用它就可以自动加载模块,不需要手动的在每个js文件前importrequire引入
而且还需要用到export-loader(ε=(´ο`*)))唉 好麻烦呐),官方文档要求,如果我们要按需引入组件的时候就需要借助export-loader去帮我们在组件的js代码中去添加module.exports = ...这样才能实现按需引入。

npm install export-loader -D

然后在我们的webpack.dev.conf.jswebpack.prod.conf.js中的Plugin:[]中添加下面的代码

new webpack.ProvidePlugin({
  $: 'jquery',
  jQuery: 'jquery',
  'window.jQuery': 'jquery',
  Popper: ['popper.js', 'default'],
  // In case you imported plugins individually, you must also require them here:
  Util: "exports-loader?Util!bootstrap/js/dist/util",
  Dropdown: "exports-loader?Dropdown!bootstrap/js/dist/dropdown",
})

这里就会发现devprod有重复的部分了。并且我们以后每引入一个组件就必须在这里添加类似的一行代码
Dropdown: "exports-loader?Dropdown!bootstrap/js/dist/dropdown",所以就很有必要去写一些函数去处理这些情况。

首先在build中创建bootstrap-components.js文件,主要用于批量生成bootstrap组件的配置。
注意: 之后添加组件的时候只需要在这里添加即可!!

let components = [
  'Util',
  'Dropdown',
];

module.exports = (function (){
  let o = {};
  for(let name of components) {
    o[name] = `exports-loader?${name}!bootstrap/js/dist/${name.toLowerCase()}`
  }
  return o;
})();

之后在utils.js中增加这些代码,用于生成providerPlugin的配置。

var webpack = require('webpack')
var components = require('./bootstrap-components')

exports.genProviderPlugin = function () {
  return new webpack.ProvidePlugin(Object.assign({
    $: 'jquery',
    jQuery: 'jquery',
    'window.jQuery': 'jquery',
    Popper: ['popper.js', 'default'],
  }, components));
}

最后只需要分别在webpack.dev.conf.jswebpack.prod.conf.js中的plugins: []中添加
utils.genProviderPlugin()即可。

至此,便完成了bootstrap-v4.0的配置,但是v4和v3之间存在很大的差别,有许多的样式需要去更改~

结束

这篇文章主要是以自己的第一个烂项目作为例子,通过项目目录结构页面模块化更新框架这三个方面进行了一波重构,让老旧项目也可以享受现代Web的开发模式。

    原文作者:Shiroyan
    原文地址: https://segmentfault.com/a/1190000011434481
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞