npm script工作流(五) 环境变量和npm run 自动

主要内容：

• completion插件: https://docs.npmjs.com/cli/completion
• zsh-better-npm-completion插件 ：https://github.com/lukechilds/zsh-better-npm-completion
• yarn自动补全：https://github.com/mklabs/yarn-completions

---

预定义变量

• 获取完整的变量列表 npm run env
npm run env | grep npm_package | sort 排序后的预定义环境变量

npm_package_author=
npm_package_dependencies__tarojs_components=2.2.13
npm_package_dependencies__tarojs_components_qa=2.2.13
npm_package_dependencies__tarojs_redux=2.2.13
npm_package_dependencies__tarojs_redux_h5=2.2.13
npm_package_dependencies__tarojs_router=2.2.13
npm_package_dependencies__tarojs_taro=2.2.13
npm_package_dependencies__tarojs_taro_alipay=2.2.13
npm_package_dependencies__tarojs_taro_h5=2.2.13
npm_package_dependencies__tarojs_taro_qq=2.2.13
npm_package_dependencies__tarojs_taro_quickapp=2.2.13
npm_package_dependencies__tarojs_taro_swan=2.2.13
npm_package_dependencies__tarojs_taro_tt=2.2.13

npm script 使用环境变量 $

{
  "dummy": "echo $npm_package_name"
}

自定义变量 (npm_package_config_port)

• 添加依赖库

$ npm i http-server -D    # 等价命令 npm install http-server --save-dev

 { 
    "cover:serve": "http-server coverage_archive/$npm_package_version -p $npm_package_config_port",
    "cover:open": "opn http://localhost:$npm_package_config_port",
    "postcover": "npm-run-all cover:archive cover:cleanup --parallel cover:serve cover:open"
}

命令行自动补全 （https://docs.npmjs.com/cli/completion）

列出当前项目中，可运行的脚本 npm run | less

image.png

类似于 Vim 中的搜索，键入/ 进入搜索模式

安装 npm completion （completion）

• bash
• zsh

npm completion >> ~/.bashrc
npm completion >> ~/.zshrc

安装完成，键入空格 然后按tab键 试试效果

高级的自动完成(展示细节)

zsh-better-npm-completion

• 安装：README.md

yarn 的命令自动补全

yarn-completions