46

使用webpack+babel开发npm模块

 5 years ago
source link: https://fy98.com/2018/07/10/about-develop-and-publish-npm/?amp%3Butm_medium=referral
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

开发npm包,推荐使用ES6书写,再用babel进行转码,将ES6转成ES5,开发体验好,效率高。

VJ7JfaE.jpg!web

一个典型的node工程目录解构,bin目录下存放程序入口,libs目录下存放逻辑源码,使用webpack进行模块构建,使用babel进行ES6转码,使用npm script管理脚本。

创建node脚本入口

比如创建一个 cli.js 文件:

#!/uisr/bin/env node

console.log('your code goes here');
  1. 需要注意的是,第一行代码需要添加 片段标识符 (也叫hashbang),使用Node解释器执行该脚本。如果遇到权限问题,使用 sudo chmod +x file 添加可执行权限 。
  2. 其次,在 package.json 中,必须提供 bin 字段: "bin": "bin/cli" 相当于指定npm的入口。

使用commander处理命令参数问题

gituhub的README上写的很详细, https://github.com/tj/commander.js/blob/master/Readme_zh-CN.md

ENFRJfR.jpg!web

调试过程

  1. 推荐使用 VS Code 开发node应用,不仅仅代码提示、导航方面做的好,最好用的一点是可以直接F5启动调试模式,可以打断点一行一行的调试node程序,前提是设置好程序入口。对于更加复杂的应用, 可以通过配置 .vscode/launch.json 进行高级配置。

  2. 在项目根目录下通过 npm link 可以将项目link到全局 node_modules 目录,这样就可以在任意目录下都可以使用自己的命令,英文名叫 symbolic link ,每次保存原文件会link也会立即生效, 不用再次运行 npm link 命令。

# 查看链接的位置
$ which your_command

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK