资讯专栏INFORMATION COLUMN

记第一次发布npm包经历,smart-import

Raaabbit / 1192人阅读

摘要:故事背景前情提要自动工具,前端打字员的自我救赎的功能根据配置文件,在目标文件中自动导入规定目录下自定义模块,并监听规定目录下文件的变动,自动更新尚在测试中的使用安装工具编写配置文件需要自动导入的模块的后缀名自动导入的模块的来源目

故事背景

前情提要:自动 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...

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/92475.html

相关文章

  • 重构smart-import

    摘要:前情提要自动工具,前端打字员的自我救赎记第一次发布包经历,是重构中的代码是版本可以工作的代码配置文件待导入的模块引用模块的文件引用模块的方式忽略的模块实现监听文件的删除和添加以上代码主要使用了来监听文件的变化。 前情提要 自动 Import 工具,前端打字员的自我救赎 记第一次发布npm包经历,smart-import GitHub:smart-import develop是重构中的代...

    Pocher 评论0 收藏0
  • vue-cli@3.0和之前版本的差异

    摘要:记使用方式和之前版本的差异的使用下载和安装项目生成的目录结构以上,目前版本的使用下载和安装项目生成的目录结构新的目录结构,隐藏了配置文件,封装了细节对比个区别区别下载包的包命变化。貌似是之前的版本有点问题 记vue-cli@3.0使用方式和之前版本的差异 @2.9.3的使用 1.下载vue-cli和安装项目 cnpm i -g vue-cli#2.9.3 vue init webpa...

    wow_worktile 评论0 收藏0
  • 手把手发布一个npm及相关注意事项

    摘要:前言这里是发布包的具体步骤,手把手教会,相关原理在其他文章下面有原理好文章指路分钟教你快速开发一个插件并发布手把手教你封装一个发布之前,需要注册一个账号这里注册具体步骤新建项目如需安装代码下面新建一个文件夹。 前言 这里是发布npm包的具体步骤,手把手教会,相关原理在其他文章下面有原理好文章指路10分钟教你快速开发一个vue插件并发布npm 手把手教你封装一个 vue componen...

    ZoomQuiet 评论0 收藏0
  • 如何发布你自己的React模块至NPM

    摘要:文章介绍如何创建发布一个包,包括项目搭建发布流程注意事项等。语义化版本号分为三位。主版本号当进行了大都改动或者对有很多不兼容修改时应该进行版本号升级。次版本号增加了部分特性或者优化时升级该版本。如如果你想撤回指定版本,执行包名版本号。 文章介绍如何创建发布一个npm包,包括项目搭建、发布流程、注意事项等。 演示代码GitHub地址 1. 初始化项目 首先在创建好的项目文件夹下面执行 ...

    zombieda 评论0 收藏0
  • 前端性能优化与上线

    摘要:看下状态可以看到我已经有一些镜像了我已经删除了拉镜像正常即可,中间那段是中国镜像源,我们成功下来了的镜像。攻破像我这样屌丝的服务器一般都买的,大的资源文件不住,一个动辄的文件这很蛋疼,不上很难受。 4000字长文,多图预警!!!流量慎入!! 性能优化 - 屌丝前端性能优化、上线一条龙 大家好我又来了,本章给大家带来的内容是:上线和上线后的性能优化 项目地址 实战预览地址 实战项目地址...

    wupengyu 评论0 收藏0

发表评论

0条评论

Raaabbit

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<