8种机械键盘轴体对比
本人程序员，要买一个写代码的键盘，请问红轴和茶轴怎么选？
准备工作
从package.json开始1npm init
创建工程目录src //源文件components //组件
page //页面、布局组件
router //路由
views //视图模板
package.json
webpack.config.js
安装依赖1
2
3
4
5npm install --save-dev [email protected] express
clean-webpack-plugin
webpack-dev-middleware
webpack-hot-middleware
html-webpack-plugin express
创建一个基本的 Express 应用大白话：nodejs搭建web服务器1
2
3
4
5
6
7
8
9
10
11//app.js
const express = require('express');
const app = express();
app.get('/', function (req, res) {
res.send('Hello World!');
});
app.listen(3000, function () {
console.log('Example app listening on port 3000!n');
});启动1$ node ./src/app.js或者在package.json的scripts脚本中设置启动命令1
2
3
4
5
6"scripts": {
"test": "echo "Error: no test specified" && exit 1",
"server": "node ./src/app.js"
}
$ npm run server//启动关于express不做过多介绍，有兴趣学习的。详见官方文档：Express-基于Node.js平台的web应用开发框架
webpack基本配置webpack 是一个现代 JavaScript 应用程序的静态模块打包器。吧啦吧啦……感觉概念好无聊，官方文档已经很详尽了，本人就不多做赘述了。详见webpack官方中文文档
webpack最重要的就是入口和出口的配置了吧！先上干货1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16const path = require('path');
module.exports = {
entry: path.resolve(__dirname, 'src/main.js'),
output: {
path: path.resolve(__dirname, 'dist'),
filename: '[name].bundle.js',
publicPath: '/'
},
module: {
rules: [{
test: /.(less|css)$/,
use:['style-loader','css-loader', 'less-loader']
}]
}
}在package.json的scripts脚本中设置命令1
2
3
4
5
6"scripts": {
"test": "echo "Error: no test specified" && exit 1",
"build": "webpack"
}
$ npm run build//启动命令：打包结果：生成一个dist文件夹，里面有打包好的文件 main.bundle.js
入口(entry)
1.入口，即起点，“梦”开始的地方。
2.单个入口语法1
2
3
4
5
6
7
8
9
10// 简写
module.exports = {
entry:'./src/main.js'
}
module.exports = {
entry:{
main:'./src/main.js'
}
}
3.对象语法1
2
3
4
5
6module.exports = {
entry:{
main:'./src/main.js'，
vendors: './src/vendors.js'
}
}应用：多入口配置可以满足比较中大型的项目开发，即多页面应用程序，多页应用能够复用入口起点之间的大量代码/模块。使用 CommonsChunkPlugin 为每个页面间的应用程序共享代码。
输出(output)
1.输出，即成果，并不是“梦”结束的地方，而是一个里程碑吧！
2.用法:最低包括两个属性 filename，path1
2
3
4
5
6module.exports = {
output: {
path: path.resolve(__dirname, 'dist'),
filename: '[name].bundle.js'
}
}配置多入口，会生成多个对应的打包文件
3.补充一个常用的 publicPath 属性输出解析文件的目录。并不会对生成文件的路径造成影响，主要是对你的页面里面引入的资源的路径做对应的补全。常用于在生产模式下更新内嵌到css、html文件里的url值。
loaderloader 让 webpack 能够去处理那些非 JavaScript 文件。webpack 的配置中 loader 有两个目标：
1.test 属性，用于标识出应该被对应的 loader 进行转换的某个或某些文件。
2.use 属性，表示进行转换时，应该使用哪个 loader。什么？打包后的css是放在 .bundle.js 里面的？一点都不好！解决：所以要做代码分离呀！请看下面，常用的插件【plugins】
几个项目开发必备插件【plugins】
我们打包好的js文件是提供给HTML用的，现在竟然没有html文件，但让我们可以提前在dist文件夹中提前写一个index.html。但是既然用到webpack打包工具，就应该发挥它最大的功能。webpack提供了生成HTML的插件 html-webpack-plugin
html-webpack-plugin1
2
3
4
5
6
7
8
9const HtmlWebpackPlugin = require('html-webpack-plugin');
plugins: [
new HtmlWebpackPlugin({
title: '首页',
filename: path.resolve(__dirname, 'dist/index.html'),
template: path.resolve(__dirname, 'src/views/template.html')
})
]如果不配置任何参数，或默认生成index.html，并引入打包后的外部资源js,css文件；介绍几个常用属性
1.filename 文件名，默认为index.html，还可以指定输出目录位置。注意：
<1>.filename配置的html文件目录是相对于webpackConfig.output.path路径而言的，不是相对于当前项目目录结构的。
<2>.指定生成的html文件内容中的 link 和 script 路径是相对于生成目录下的，写路径的时候请写生成目录下的相对路径。
2.template 引用的模板
3.title 标题。不可覆盖模板中的标题。模板中设置 可取到。
4.minify 是否压缩html
5.chunks 在配置多个页面时，每个页面注入的thunk应该是不相同的，需要通过该配置为不同页面注入不同的thunk。
extract-text-webpack-plugin该插件的主要是为了抽离css样式,防止将样式打包在js中引起页面样式加载错乱的现象。
先上干货1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20const ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
module: {
rules: [{
test: /.(less|css)$/,
use: ExtractTextPlugin.extract({
use: ['css-loader', 'less-loader'],
fallback: 'style-loader'
})
}]
},
plugins: [
new ExtractTextPlugin({
filename: path.resolve(__dirname, 'dist/css/[name].css'),
disable: false,//true
allChunks: false
})
]
}这个插件有个属性 disable,官方解释：禁用插件。设置为false,会启用此插件，分离出CSS；设置为true，禁用此插件，CSS不会分离。模块热替换更新的是bundle.js，所以设置为false，不会实时跟新CSS，要想在开发中分离css，并且实时更新CSS。用到一个 css-hot-loader配置如下：1
2
3
4
5
6
7rules:[{
test: /.(less|css)$/,
use: ['css-hot-loader'].concat(ExtractTextPlugin.extract({
use: ['css-loader', 'less-loader'],
fallback: 'style-loader'
}))
}]
clean-webpack-plugin每次打包之前，清理一下dist文件夹。可以长期积累下的无用文件删除。1
2
3
4
5const CleanWebpackPlugin = require('clean-webpack-plugin');
plugins: [
new CleanWebpackPlugin(['dist'])
]
node服务器和webpack结合，构建本地开发环境
两者的桥梁——中间件(webpack-dev-middleware)还是先上干货1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17// app.js
const express = require('express');
const webpack = require('webpack');
const webpackDevMiddleware = require('webpack-dev-middleware');
const webpackConfig = require('../webpack.config');
const app = express();
const compiler = webpack(webpackConfig);
app.use(webpackDevMiddleware(compiler, {
publicPath: webpackConfig.output.publicPath
}));
app.listen(3000, function () {
console.log('Example app listening on port 3000!n');
});webpack-dev-middleware 是一个容器,它可以把 webpack 处理后的文件传递给一个服务器(server)。
模块热替换它允许在运行时更新各种模块，而无需进行完全刷新。前端开发的福音。webpack中内置的devServer可以快速的配置模块热替换。详见模块热替换
因为本人用的express搭的node服务，所以还需要稍稍配置一下。先上干货
1.app.js1
2
3
4
5
6var hotMiddleware = require('webpack-hot-middleware')(compiler, {
log: false,
heartbeat: 2000
});
app.use(hotMiddleware);
2.webpack.config.js1
2
3
4
5const webpack = require('webpack');
plugins: [
new webpack.HotModuleReplacementPlugin()
]
3.entry配置中1
2
3
4
5module.exports = {
entry:{
main:['webpack-hot-middleware/client?noInfo=true&reload=true','./src/main.js']
}
}如果多入口的话就是这样1
2
3
4
5
6
7module.exports = {
entry:{
main:['webpack-hot-middleware/client?noInfo=true&reload=true','./src/main.js'],
app:['webpack-hot-middleware/client?noInfo=true&reload=true','./src/app.js'],
vender:['webpack-hot-middleware/client?noInfo=true&reload=true','./src/vender.js']
}
}对于我这种人，我看着这么繁琐的东西，一顿吐槽。所以，稍稍做了些处理。1
2
3
4
5
6
7const entries = {
main:path.resolve(__dirname, 'src/main.js')
}
Object.keys(entries).forEach(function (name) {
entries[name] = ['webpack-hot-middleware/client?noInfo=true&reload=true'].concat(entries[name])
});这样把 entries 单独拿出来进行处理后，再配置，是不是清爽很多？最后执行 npm run server，我们在开发的时候，修改了模块的代码，会实时的在浏览器上更新。
898
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
