快速構建一個測試web項目

單純的運行一段js邏輯的話就不須要構建測試項目，直接寫個js，node命令行運行一下就能夠了，可是每每閱讀一段他人的源碼想要本身測試一下就沒辦法這樣子，由於別人會依賴模塊，會操做瀏覽器dom等等，因此本身寫一個測試小demo有時候就頗有用處。

nodejs裏面又沒有什麼dom元素，什麼window全局對象，因此咱們的代碼最好運行在瀏覽器端，那麼構造一個index.html是必不可少的，而後引入對應的js，這樣就能夠了？哪有這麼簡單。

npm init 初始化項目

別人的代碼裏面依賴了一些模塊，還用了ES6的語法，因此咱們須要讓咱們的node環境支持ES6語法，那就須要引入babel。用npm init初始化一下，node就會爲你建立一個package.json，用來管理你的依賴包，命令配置。

babel的配置

npm install babel-register --save
npm install babel-preset-env --save

而後經過

require("babel-register");
require("./test.js");

的方式來解決ES6的語法問題，可是你會發現瀏覽器連require都不支持，那是固然的，JavaScript裏面歷來沒據說過require語法。因此咱們須要用到構建工具把代碼編譯成瀏覽器能夠識別的js。這裏就要用到webpack來進行打包模塊化。

webpack打包構建

記好先全局安裝webpack：

npm i webpack -g

而後咱們就能夠經過配置來對你的js進行打包了，下面是最簡單的配置：

const path = require('path');

module.exports = {
  // JavaScript 執行入口文件
  entry: './index.js',
  output: {
    // 把全部依賴的模塊合併輸出到一個 bundle.js 文件
    filename: 'bundle.js',
    // 輸出文件都放到 dist 目錄下
    path: path.resolve(__dirname, './dist'),
  }
};

webpack的配置自行研究，推薦《深刻淺出Webpack》。

運行

webpack --config webpack.config.js

就能夠打包你的js了，目錄就是當前目錄的dist文件夾下。固然想要起做用index.html必須引入這個js。

使用webpack-dev-server起服務

你是否是發現每次更改代碼就須要打包一下，這樣確定很煩啊，因此利用webpack-dev-server在本地起一個服務，方便在你作出修改時刷新就能夠看到變化。
咱們構建server.js,像這樣

var webpack = require('webpack');
var WebpackDevServer = require('webpack-dev-server');
var config = require('./webpack.config');

var compiler = webpack(config);

var server = new WebpackDevServer(compiler, {
    publicPath: config.output.publicPath,
    hot: true,
    historyApiFallback: true,
    stats: {
        colors: true,
        hash: false,
        timings: true,
        chunks: false,
        chunkModules: false,
        modules: false
    }
});

server.listen(3040, 'localhost', function(err, result) {
    if (err) {
        return console.log(err);
    }
    console.log('Listening at http://localhost:3040/');
});

以後運行node server.js就能夠在本地3040端口七個服務，以後你想在index.html寫什麼東西本身看着吧，邏輯天然也能夠運行。
仍是不清除的能夠去個人GitHub上看一下，很水的一個項目QuickBuild，別噴我。