『翻译』你也许并不需要构建工具

Read the original

我们最好了解”原生”的构建方式

译者注：这篇文章旨在告诉大家，构建的过程是怎样的。因为现在太多的脚手架工具了，大家确实很方便就搭建了环境，但内部的过程却让人迷糊。

前言

构建工具变得越来越丰富多彩了，但是你真的需要它们吗？有没有更简单的方式去搭建Rollup、Stylus或者其它的环境，而不用花上一整天时间。

现在我要向你展示用“原生”的方式构建项目，使用NPM scripts和监听器(chokidar)。

初始化node.js项目

我们先创建一个node.js项目。打开你的命令行输入以下命令：

1
2
3

$ mkdir example
$ cd example
$ npm init -y

然后创建一些文件夹并安装express：

1 2	$ mkdir -p css js public/js public/css $ npm i express --save

然后，我们需要一个简单的web服务器(译者注：因为我使用的atom编辑器，所以使用atom命令可以直接创建server.js并打开它)：

1 2	$ 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工具。如果你喜欢的话，可以选择你中意的工具。

1	$ npm i stylus nib rollup rollup-plugin-buble uglify-js --save-dev

接下来可以增加一些npm scripts，先打开package.json：

1 2	$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"
}

让我们开始编辑详情：

1	stylus -u nib css/index.styl -o public/css/main.css

上面这句命令执行顺序：

运行stylus
加载nib插件
打开css/index.styl
编辑public/css/main.css

1	rollup -c -f iife js/index.js -o public/js/main.js

上面这句命令执行顺序：

运行rollup
使用配置文件（我们将在接下来创建它）
格式化IIFE
打开js/index.js
编辑public/js/main.js

1	uglifyjs public/js/main.js -cmo public/js/main.min.js

上面这句命令的执行顺序：

运行uglify-js
打开public/js/main.js
压缩&最小化
编辑public/js/main.min.js

配置Rollup

接下来我们要创建rollup的配置文件：

1 2	$ touch rollup.config.js $ atom rollup.config.js

没有多少要配置的：

import buble from 'rollup-plugin-buble';
export default {
  plugins: [
    buble()
  ]
};

这样就够了.

创建一个文件监听器

还有一件事。我们需要一个文件监听器，让我们来安装chokidar：

1	$ npm i chokidar --save-dev

然后创建一个watch.js：

1 2	$ 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：

1 2	$ touch css/index.styl $ atom css/index.styl

这是一个很简单的”bootstrap”：

@import 'nib';
body {
  font-family: sans-serif;
}

…还有JS：

1 2	$ touch js/index.js $ atom js/index.js

这里同样也没有太多事情发生：

1
2
3

const hello = document.createElement('h1');
hello.textContent = 'Hello world!';
document.body.appendChild(hello);

还需要一些HTML：

1 2	$ 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>

完成!

让我们试试看：

1	$ npm run dev

在浏览器地址栏输入http://localhost:8080

搞定，没问题！

本文作者：余震（Freak）
本文出处：Rockjins Blog
版权声明：本博客所有文章除特别声明外，均采用 CC BY-NC-SA 3.0 CN许可协议。转载请注明出处！