旧多页应用项目的重构

一些感叹

利用最近自己写的一个针对多页应用而写的脚手架，对自己第一个写的项目进行重构。哈哈，那个时候刚入门前端，还不知道有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

js、css的引入

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

入坑JQuery和Bootstrap v4

Bootstrap-v4 官方文档

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

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

npm install export-loader -D

然后在我们的webpack.dev.conf.js和webpack.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",
})

这里就会发现dev和prod有重复的部分了。并且我们以后每引入一个组件就必须在这里添加类似的一行代码
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.js和webpack.prod.conf.js中的plugins: []中添加
utils.genProviderPlugin()即可。

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

结束

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