一些感叹
利用最近自己写的一个针对多页应用而写的脚手架,对自己第一个写的项目进行重构。哈哈,那个时候刚入门前端,还不知道有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
。 看着这个目录结构此刻的心情(/ω\)
- 首先第三方库的css和js文件应该集中放在一个lib文件夹下。把业务相关的东西和无关的东西分开
- 页面和其相关的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
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的开发模式。