记第一次发布npm包经历,smart-import,node-command-line-tool

故事背景

前情提要自动 Import 工具,前端打字员的自我救赎

github: smart-import

smart-import 的功能

根据配置文件,在目标文件中自动导入规定目录下自定义模块,并监听规定目录下文件的变动,自动更新

尚在测试中

smart-import 的使用

安装工具

npm install smart-import -g

编写配置文件smart-import.json

{
    "extname": ".vue",
    "from": "demo/pages",
    "to": "demo/router/index.js",
    "template": "const moduleName = () => import(modulePath)",
    "ignored": [
        "demo/pages/pageA.vue",
        "demo/pages/**/*.js"
    ]
}

extname:需要自动导入的模块的后缀名

from:自动导入的模块的来源目录

to:目标文件

template:导入方式的模版

ignored:需要忽略的模块

启动工具

在命令行输入

simport

smart-import 的诞生

smart-import作为命令行工具,和平常写网站还是有些不同的。

同样的部分,github建仓库,npm init

通过npm init会生成package.json文件,其中main字段的作用在于,如果你的代码最终作为一个模块被其他人import/require,那么这个文件就是这个模块的入口文件,可以参考node加载模块的机智

摘自npm官方文档

The main field is a module ID that is the primary entry point to your program. That is, if your package is named foo, and a user installs it, and then does require("foo"), then your main module's exports object will be returned.

This should be a module ID relative to the root of your package folder.

For most modules, it makes the most sense to have a main script and often not much else.

由于smart-import是一个命令行工具,并不会被其他人import/require,所以main字段可以忽略;而要注意的是bin字段

"bin": {
    "simport": "./bin/index.js"
 },

摘自npm官方文档

A lot of packages have one or more executable files that they'd like to install into the PATH. npm makes this pretty easy (in fact, it uses this feature to install the "npm" executable.)

To use this, supply a bin field in your package.json which is a map of command name to local file name. On install, npm will symlink that file into prefix/bin for global installs, or ./node_modules/.bin/ for local installs.

简单来说,就是将你的脚本放到环境变量中

而在你的脚本的第一行务必要加上

#!/usr/bin/env node

用于告诉计算机用 node 来运行这段脚本

在测试自己的脚本之前要把运行

npm install -g

把自己的脚本链接到环境变量中,不然会被告知该命令不存在

smart-import 的发布

先要有npm的账号

然后给package添件账号

npm adduser

之后可以通过npm whoami来核实自己的账号信息

最后就是

npm publish

版本更新

npm version patch
npm publish

参考资料

https://docs.npmjs.com/files/...

https://developer.atlassian.c...

https://javascriptplayground....

https://www.sitepoint.com/jav...

原文链接:segmentfault.com

上一篇:5女孩:北京的你如此美丽。
下一篇:webpack 持久化缓存实践

相关推荐

  • (原创)vue-router的Import() 异步加载模块问题的解决方案

    关注不迷路,如果解决了问题,留下个赞。 1、问题现象 2、出现问题的代码点 3、替代方案: 把import() 替换成如下: Promise.resolve().then(()=&...

    6 个月前
  • 重构smart-import

    前情提要 自动 Import 工具,前端打字员的自我救赎 记第一次发布npm包经历,smart-import GitHub:smart-import develop是重构中的代码 master是1.0...

    3 年前
  • 解决低版本的浏览器不支持es6的import问题

    解决方法: 1. 2. 下载最新版本的chrome浏览器 以上这篇解决低版本的浏览器不支持es6的import问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持JavaSc...

    3 年前
  • 解决 vue热加载编译速度慢问题,引入按需加载插件 dynamic-import-node

    起初是同事反应 开发环境下,在编译中遇到了一个大问题(我和另外一个同事因为电脑配置好一些,基本没什么卡顿)。当编译项目时,需要花费很长时间进行76%的基本块优化 下面这俩地方 都会卡顿挺长时间 ...

    7 个月前
  • 解决 import 导入 umd 模块报错的问题

    在写组件库时用vue-cli 3.x的 vue-cli-service build --target lib --name index [entry]可以直接构建npm包,npm publish后再通...

    1 年前
  • 自动 Import 工具,前端打字员的自我救赎

    作为一个前端打字员,一个经常遇到的场景就是在路由文件中引入模块,比如这样 在 router/index.js 中写入 import Vue from 'vue' import Router from...

    3 年前
  • 自制一个自动导入( auto import )的vscode插件

    遇到的问题 使用vue时,每次导入组件都十分的麻烦,得先写明组件标签,然后在script标签中import导入,在components中显式声明。。。遇到这种劳动重复性问题时,我都会想是否能用脚本完成...

    2 年前
  • 手把手教你搭建脚手架工具 - (commander)

    随着NodeJs的不断发展,对于前端来说要做的东西也就更多,Vue脚手架React脚手架等等等一系列的东西都脱颖而出,进入到人们的视野当中,对于这些脚手架工具来讲也只是停留在应用阶段,从来没有想过脚手...

    1 年前
  • 干货:import和require如何在项目中混用

    前言 自从js出了es6之后,小伙伴们都在项目中愉快的用起了import,export default,但是,当我们用import方式引入npm第三方模块的时候,却会发现,npm包导出的方式大多是采用...

    7 个月前
  • 富婆给你说require、import和export

    简单粗暴,富婆给你说,其实我也没太搞明白,最近看了一篇文章我才理清了一点点思路,最近整日沉迷于肥宅快乐水,技术都跟不上了,来篇文章,提神醒脑,朝着我的富婆梦更近一步,早日走上富婆路,包养我家大狼狗!!...

    1 年前

官方社区

扫码加入 JavaScript 社区