我們最好了解"原生"的構建方式
譯者注：這篇文章旨在告訴大家，構建的過程是怎樣的。因為現在太多的腳手架工具了，大家確實很方便就搭建了環境，但內部的過程卻讓人迷糊。
前言
構建工具變得越來越豐富多彩了，但是你真的需要它們嗎？有沒有更簡單的方式去搭建Rollup、Stylus或者其它的環境，而不用花上一整天時間。
現在我要向你展示用“原生”的方式構建專案，使用NPM scripts和監聽器(chokidar)。
初始化node.js專案
我們先建立一個node.js專案。開啟你的命令列輸入以下命令：
$ mkdir example
$ cd example
$ npm init -y複製程式碼然後建立一些資料夾並安裝express：
$ mkdir -p css js public/js public/css
$ npm i express --save複製程式碼然後，我們需要一個簡單的web伺服器(譯者注：因為我使用的atom編輯器，所以使用atom命令可以直接建立server.js並開啟它)：
$ touch server.js
$ atom server.js複製程式碼接下來要把public資料夾對外開發，在server.js中寫入如下程式碼：
const path = require('path');
const express = require('express');
const app = express();
const PUBLIC = path.join(__dirname, 'public');
app.use(express.static(PUBLIC));
app.listen(8080);複製程式碼建立一些NPM scripts
接下來我們要安裝JS和CSS工具。如果你喜歡的話，可以選擇你中意的工具。
$ npm i stylus nib rollup rollup-plugin-buble uglify-js --save-dev複製程式碼接下來可以增加一些npm scripts，先開啟package.json：
$touch package.json
$atom package.json複製程式碼npm scripts的美妙之處就在於，你所有的依賴關係都可以安裝在本地，並按照官方文件去執行命令，在package.json中寫入如下程式碼：
{
"name": "example",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"dev": "node watch",
"build-css": "stylus -u nib css/index.styl -o public/css/main.css",
"build-js": "rollup -c -f iife js/index.js -o public/js/main.js",
"uglify-js": "uglifyjs public/js/index.js -cmo public/js/main.min.js"
},
"keywords": [],
"author": "",
"license": "ISC"
}複製程式碼讓我們開始編輯詳情：
stylus -u nib css/index.styl -o public/css/main.css複製程式碼上面這句命令執行順序：
執行stylus
載入nib外掛
開啟css/index.styl
編輯public/css/main.css
rollup -c -f iife js/index.js -o public/js/main.js複製程式碼上面這句命令執行順序：
執行rollup
使用配置檔案（我們將在接下來建立它）
格式化IIFE
開啟js/index.js
編輯public/js/main.js
uglifyjs public/js/main.js -cmo public/js/main.min.js複製程式碼上面這句命令的執行順序：
執行uglify-js
開啟public/js/main.js
壓縮&最小化
編輯public/js/main.min.js
配置Rollup
接下來我們要建立rollup的配置檔案：
$ touch rollup.config.js
$ atom rollup.config.js複製程式碼沒有多少要配置的：
import buble from 'rollup-plugin-buble';
export default {
plugins: [
buble()
]
};複製程式碼這樣就夠了.
建立一個檔案監聽器
還有一件事。我們需要一個檔案監聽器，讓我們來安裝chokidar：
$ npm i chokidar --save-dev複製程式碼然後建立一個watch.js：
$ touch watch.js
$ atom watch.js複製程式碼這裡是它的內容：
require('./server'); // run the server
const cp = require('child_process');
const chokidar = require('chokidar');
run('build-css');
run('build-js');
chokidar.watch('css/**/*.styl')
.on('change', path => run('build-css'));
chokidar.watch('js/**/*.js')
.on('change', path => run('build-js'));
chokidar.watch('public/js/main.js')
.on('change', path => run('uglify-js'));
function run (scriptName) {
const child = cp.spawn('npm', ['run', scriptName]);
child.stdout.pipe(process.stdout);
child.stderr.pipe(process.stderr);
}複製程式碼好了！這是上面這段程式碼執行的過程：
執行服務
載入node.js自帶的
child_process包執行
npm run build-css命令執行
npm run build-js命令開始監聽
css/**/*.styl和npm run build-css的任何變化開始監聽
js/**/*.js和npm run build-js的任何變化開始監聽
public/js/main.js和npm run uglify-js的任何變化定義一個簡單的指令碼執行錯誤處理機制
我們需要一些內容
我們需要新增一些CSS：
$ touch css/index.styl
$ atom css/index.styl複製程式碼這是一個很簡單的"bootstrap"：
@import 'nib';
body {
font-family: sans-serif;
}複製程式碼...還有JS：
$ touch js/index.js
$ atom js/index.js複製程式碼這裡同樣也沒有太多事情發生：
const hello = document.createElement('h1');
hello.textContent = 'Hello world!';
document.body.appendChild(hello);複製程式碼還需要一些HTML：
$ touch public/index.html
$ atom public/index.html複製程式碼也是最基本的...
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<script src="js/main.js"></script>
</body>
</html>複製程式碼完成!
讓我們試試看：
$ npm run dev複製程式碼在瀏覽器位址列輸入http://localhost:8080
搞定，沒問題！
喜歡本文的朋友可以關注我的微信公眾號，不定期推送一些好文。
本文由Rockjins Blog翻譯，轉載請與譯者聯絡。否則將追究法律責任。
本文對你有幫助？歡迎掃碼加入前端學習小組微信群：
