前端自动化 shell 脚本命令与 shell-node 脚本命令简单使用之 es6 转译

（背景：先用 babel 转译 es6 再用 browserify 打包模块化文件，来解决浏览器不支持模块化）
（Browserify是一个让node模块可以用在浏览器中的神奇工具）

今天折腾了一上午，对于前端好多自动化管理的命令用起来，步骤甚多，故想写一个脚本文件，将项目所需要执行到命令都写在一个脚本文件中，在命令行只需写一个命令即完成所有事情。
配置的环境： node + git
1.第一步：在项目根目录下新建 package.json 配置文件

{
  "name": "shell-node",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "es": "babel src/js -d build",
    "browserify": "browserify build/index.js > bundle.js",
    "build": "npm run es && npm run browserify"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-cli": "^6.0.0",
    "babel-core": "^6.23.1",
    "babel-polyfill": "^6.23.0",
    "babel-preset-es2015": "^6.22.0"
  }
}

("这些脚本可以是行内bash命令，或者也可以指向可执行的命令行文件。你还可以在脚本内引用其他npm脚本");
一：shell 脚本 :
文件名：test.sh 位置：项目根目录

#!/bin/bash
#the first program
echo -e "\e[1;34m hello shell \e[0m"
npm run es && npm run browserify

shell 脚本运行： bash test.sh

二：shell-node 脚本
注：用 js 语法写的命令行脚本
文件名：hello.sh 位置：项目根目录

#!/usr/bin/env node
console.log('hello world!');
.....

在项目根目录打开 git bash ,可在 package.json 中添加这样一段 bin 代码：

"bin":{
    "hello": "./hello.sh"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "es": "babel src/js -d build",
    "browserify": "browserify build/index.js > bundle.js",
    "build": "npm run es && npm run browserify"
  },

命令行输入 , npm link 可以全局使用，使用时，在命令行直接输入 hello 即可执行此脚本文件。
<h5>移除此全局命令：</h5>在此脚本文件的根目录打开 git bash 命令行输入： npm remove -g

三：'onchange 插件监视文件变化自动执行脚本的合并任务'
package.json 配置如下：

 "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "es": "babel src/js -d build",
    "browserify": "browserify build/index.js > bundle.js",
    "build": "npm run es && npm run browserify",
    "watch": "onchange src/js/*.js -- npm run build"
  },
  "devDependencies": {
    "onchange": "^3.2.1"
}

相关文章部分内容：
变更监控

至此，我们的任务不断的需要对文件做一些变更，我们不断的需要切回命令行去运行相应的任务。针对这个问题，我们可以添加一个任务来监听文件变更，让文件在变更的时候自动执行这些任务。这里我推荐使用onchange插件，安装方法如下：

npm i -D onchange

让我们来给CSS和JavaScript设置监控任务：

"scripts": {
  ...
  "watch:css": "onchange 'src/scss/*.scss' -- npm run build:css",
  "watch:js": "onchange 'src/js/*.js' -- npm run build:js",
}

这些任务可以分解如下：onchange需要你传参想要监控的文件路径（字符串），这里我们传的是SCSS和JS源文件，我们想要运行的命令跟在--之后，这个命令当路径内的文件发生增删改的时候就会被立即执行。
让我们再添加一个监控命令来完成我们的npm scripts构建过程。

再添加一个包，parallelshell：

npm i -D parallelshell

再次给scriopts对象添加一个新任务：

"scripts": {
  ...
  "watch:all": "parallelshell 'npm run serve' 'npm run watch:css' 'npm run watch:js'"
}

parallelshell支持多个参数字符串，它会给npm run传多个任务用于执行。

写在最后：
开发环境里将 jQuery 通过 npm 包管理工具下载，需要用到的文件顶部将其引入 es6 引入使用：

import "babel-polyfill";
import $ from "jquery";
import {firstName, lastName, year} from './profile';

$('h1').css({"color":"red"});
.....

package.json 最终事例：

{
  "name": "shell-node",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "author": "",
  "license": "ISC",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "es": "babel src/js -d build",
    "browserify": "browserify build/index.js > bundle.js",
    "build": "npm run es && npm run browserify",
    "watch": "onchange src/js/*.js -- npm run build"
  },
  "devDependencies": {
    "babel-cli": "^6.0.0",
    "babel-core": "^6.23.1",
    "babel-polyfill": "^6.23.0",
    "babel-preset-es2015": "^6.22.0",
    "browserify": "^14.1.0",
    "jquery": "^3.1.1",
    "onchange": "^3.2.1"
  }
}

.babelrc 内容事例：

{
    "presets": [
        "es2015"
    ],
    "plugins": []
}

最后通过上文所阐述的方法将其使用，提高开发效率：用 babel 转译再用 browserify 将 js 打包成一个 js 文件，最终 html 引入使用。

前端自动化 shell 脚本命令 与 shell-node 脚本命令 简单使用 之 es6 转译

猜你喜欢

前端自动化 shell 脚本命令与 shell-node 脚本命令简单使用之 es6 转译