在学习用express搭建在线便利贴之前，我们要学习express相关的知识，知道使用webpack打包工具，以及less相关的语法
- express要学习的是中间件，路由和模板引擎
- webpack的使用，和它的配置
- less，css预处理语言，一种基于CSS之上的高级语言。
下面进行我们正式的开始：
1、npm init -y 初始化
2、npm i express --save 本地下载express
可以使用nrm use cnpm切换到淘宝镜像，发布npm包的时候再用nrm use npm切换回来。这样可以在下载npm包的时候更快。
3、npm install express-generator 下载express应用生成器
4、./node_modules/express-generator/bin/express-cli.js . -f -e生成app的应用
5、然后安装所有依赖包：npm install
运行：npm start,然后打开http://localhost:3000/，出现如下图的页面
image.png
6、更改文件配置
image.png
- src：输出目录
- js文件
- app:index.js
- lib:jQuery文件
- mod：模块组件
- less:less文件
- webpack.config.js:webpack配置文件
- js文件
var webpack = require('webpack')
var path = require('path')
module.exports = {
entry: path.join(__dirname, "js/app/index.js"),
output: {
path: path.join(__dirname, "../public/js"),
filename: "index.js"
},
};
//把js/app/index.js输出到public/js下
7、安装webpacknpm install webpack --save-dev以及npm install onchang --save-dev
在package.json文件下添加
"webpack": "webpack --config=src/webpack.config.js",
"watch": "onchange \"src/**/*js\" \"src/**/*.less\" -- npm run webpack"
//作用是通过webpack打包到静态资源目录，onchange是为了监听src目录下所有文件的改变
8、安装loader，npm install less less-loader css-loader style-loader --save,用于将less文件导出成css文件，渲染到页面上
9、改写webpack.config.js
var webpack = require('webpack')
var path = require('path')
module.exports = {
entry: path.join(__dirname, "js/app/index.js"),
output: {
path: path.join(__dirname, "../public/js"),
filename: "index.js"
},
module: {
rules: [{
test: /\.less$/,
use: ["style-loader","css-loader", "less-loader",]
}]
},
resolve: {
alias: {
jquery: path.join(__dirname, "js/lib/jquery-3.3.1.min"),
mod: path.join(__dirname, "js/mod"),
less: path.join(__dirname, "less")
}
},
plugins: [
new webpack.ProvidePlugin({ //在所有有需求jquery的js文件里，不要需要require("jquery")
$: "jquery"
}),
]
};
10、这些工作准备好之后在src>js>mod新建toast.js文件
require('less/toast.less');
function toast(msg, time){
this.msg = msg;
this.dismissTime = time||1000; //ms
this.createToast();
this.showToast();
}
toast.prototype = {
createToast: function(){
var tpl = '<div class="toast">'+this.msg+'</div>';
this.$toast = $(tpl);
$('body').append(this.$toast);
},
showToast: function(){
var self = this;
this.$toast.fadeIn(300, function(){
setTimeout(function(){
self.$toast.fadeOut(300,function(){
self.$toast.remove();
});
}, self.dismissTime);
});
}
};
function Toast(msg,time){
return new toast(msg, time);
}
module.exports.Toast = Toast;
src>js>app新建index.js
let Toast = require('../mod/toast.js').Toast
Toast("你好");
src>js>lib新添一份jquery文件，我的是jquery-3.3.1.min.js
src>less>toast.less
.toast {
position: fixed;
left: 50%;
transform: translateX(-50%);
bottom: 20px;
color: #D15A39;
background: #fff;
padding: 5px 10px;
border-radius: 3px;
box-shadow: 0px 0px 3px 1px rgba(255,255,255,0.6);
display: none;
}
body{
background: grey;
}
在public文件夹下新建一个test.html，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script src="/js/index.js"></script>
</body>
</html>
这个时候打开两个终端，一个npm start，一个npm run watch，
在浏览器打开http://localhost:8000/test.html
页面显示如下
image.png
我们在开发者工具中可以看到，html中多了style标签，里面有css样式，这是因为在第8步中下载了loader，通过loader，将less文件转成css文件，并生成style标签。
网友评论