(背景: 先用 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 引入 使用 。


发布评论
IT序号网

微信公众号号:IT虾米 (左侧二维码扫一扫)欢迎添加!

Immutable 常用API简介知识解答
你是第一个吃螃蟹的人
发表评论

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。