『翻譯』你也許並不須要構建工具

時間 2019-11-17

標籤翻譯也許並不須要構建工具简体版

原文原文鏈接

Read the originaljavascript

咱們最好了解"原生"的構建方式css

譯者注：這篇文章旨在告訴你們，構建的過程是怎樣的。由於如今太多的腳手架工具了，你們確實很方便就搭建了環境，但內部的過程卻讓人迷糊。html

前言

構建工具變得愈來愈豐富多彩了，可是你真的須要它們嗎？有沒有更簡單的方式去搭建Rollup、Stylus或者其它的環境，而不用花上一成天時間。前端

如今我要向你展現用「原生」的方式構建項目，使用NPM scripts和監聽器(chokidar)。java

初始化node.js項目

咱們先建立一個node.js項目。打開你的命令行輸入如下命令：node

$ mkdir example
$ cd example
$ npm init -y複製代碼

而後建立一些文件夾並安裝express：git

$ mkdir -p css js public/js public/css
$ npm i express --save複製代碼

而後，咱們須要一個簡單的web服務器(譯者注：由於我使用的atom編輯器，因此使用atom命令能夠直接建立server.js並打開它)：github

$ touch server.js
$ atom server.js複製代碼

接下來要把public文件夾對外開發，在server.js中寫入以下代碼：web

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工具。若是你喜歡的話，能夠選擇你中意的工具。express

$ 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>複製代碼