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

时间 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>复制代码

完成!

让咱们试试看：

$ npm run dev复制代码

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

搞定，没问题！

喜欢本文的朋友能够关注个人微信公众号，不按期推送一些好文。

本文由Rockjins Blog翻译，转载请与译者联系。不然将追究法律责任。

本文对你有帮助？欢迎扫码加入前端学习小组微信群：