精华内容
下载资源
问答
  • 上一篇文章讲了使用snap离线安装软件的方式,但对于npm包怎么离线部署,snap是无能为力的。本篇文章就来讲一讲离线安装npm包的几种方法。 接下来的部分,我将以离线安装pm2为例来进行说明。pm2是一个进程守护程序,...
  • 布一个npm包
  • 于是决定自己实现这个功能,自己写一个npm包。</span> 下面我记录一下自己的实现过程。 1. npm init 选择一个文件夹,然后用命令行cd进去,然后执行npm init,这时会生成一长串表单,根据自己的实际情况填写内容 ...
  • 如果你的小程序项目没有安装过npm包的话,你需要先初始化npm npm init 二:安装npm包 这里以vant-weapp(小程序UI组件库)为例: npm i vant-weapp -S --production 三:npm包构建 1:点击微信开发者工具右上角详情...
  • 一个用于查看npm软件包文件的Web应用程序。 | 私人NPM的自我托管 使用REACT_APP_UNPKG_URL env来定制API,该API应该与UNPKG兼容: REACT_APP_UNPKG_URL=https://your-private-unpkg.org yarn build 学分 执照 麻省...
  • 主要介绍了Node.js如何优雅的封装一个实用函数的npm包的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • 链接 神奇地链接本地 npm 。 安装 稳定的 npm install -g npm-link 边缘 npm install -g https://github.com/daxxog/npm-link/tarball/master
  • 它使用获取元数据,使用绘制图形,使用进行自动布局。 它既可以作为具有简单网页的独立应用程序运行,也可以作为扩展程序运行。 Theia支持Web浏览器和 。 独立应用程序可从。 找到有关此项目的更多详细信息。 ...
  • 要使用,输入'npm'加上你的搜索词到网址栏。 JavaScript开发人员可以通过键入文本“ npm”,然后输入搜索词来在NPM中搜索软件包的快捷方式。 就像“ npm which”一样,它将在NPM注册表中搜索名称为“ which”的...
  • npm--模板 一个 npm 模板。 安装 使用 Git 克隆存储库: $ git clone https://github.com/remarkablemark/npm-package-template.git $ cd npm-package-template 或使用 ZIP 下载存储库: $ curl -LO ...
  • npm-size:获取一个npm包的安装大小
  • crypto-js npm包

    2018-12-16 01:52:24
    crypto-js npm安装包,用于AES加密的crypto-js 的npm包
  • 最近在学React,在gitHub上下载一个项目下来,安装node.js后发现用npm install就一直报错,不知道怎么解决,查了很多资料 都没有用。 在windows下 cmd到命令窗口 (最好是管理员的身份运行),结果就如下图01 才...
  • npmf - 使用终端快速获取npm包的信息
  • NPM 模板 为 NPM 创建的模板。 这将处理私有和公共。 如何创建自己的 在此处插入说明 测试 在此处插入说明示例测试代码
  • 根据 npm 名获取 github 地址开发者经常需要去 npm 官网查询 npm 的 github 地址,比较繁琐。该插件可以根据 npm名称获取其 github 地址、源码预览地址、issue 地址、npm 地址等,提交开发效率
  • 对给定的全局或本地安装的 npm 运行测试。 安装 npm i --save npm-run-tests npm test 用法 有关更多用例,请参阅 var npmTest = require ( 'npm-run-tests' ) ; 作者 Charlike Mike 试剂 执照 版权所有 (c) ...
  • 创建一个index.js文件,这里就以这个为例说明,即需要发布的npm包 初始化,在本目录下,执行npm init 执行这个操作会在demo目录下生成一个package.json文件,并且按照提示输入相应的描述 版本号等信息,具体就不...

    如果你想把你的组件发布到npm上,并通过npm install 你的包名 来安装,这样不但显得高大上,还方便有这样需要的人来安装使用,下面就简单介绍一下吧

    一、创建你的组件
    1. 先创建个目录,如demo
    2. 创建一个index.js文件,这里就以这个为例说明,即需要发布的npm包
    3. 初始化,在本目录下,执行npm init

    执行这个操作会在demo目录下生成一个package.json文件,并且按照提示输入相应的描述 版本号等信息,具体就不详细说明了

    例:你想发布一个demo的组件,版本为1.0.0

    {
      "name": "demo",
      "version": "1.0.0",
      "description": "这里填写组件描述信息",
      "main": "index.js",
      "scripts": {
        "test": "npm install demo "
      },
      "author": "charllote",
      "license": "ISC"
    }
    

    注意

    • main 字段指向新生成的 文件地址(如果使用webpack打包,即打包后的路径)
    • package.json中需要配置 devDependenciesdependencies

    "dependencies": {
        "element-ui": "^2.13.0",
        "vue": "^2.5.2",
        "vue-router": "^3.1.6"
     },
     "devDependencies": {
      "css-loader": "^0.28.7",
      "es6-promise": "^4.1.1",
      "less": "^2.7.3",
      "less-loader": "^4.0.5",
      "style-loader": "^0.19.0",
      "uglifyjs-webpack-plugin": "^2.2.0",
      "url-loader": "^0.6.2",
      "vue": "^2.5.9",
      "vue-hot-reload-api": "^2.2.4",
      "vue-html-loader": "^1.2.4",
      "vue-loader": "^13.5.0",
      "vue-router": "^3.0.1",
      "vue-style-loader": "^3.0.3",
      "vue-template-compiler": "^2.5.9",
      "vuex": "^3.0.1",
      "webpack": "^3.9.1",
      "webpack-dev-server": "^2.9.5"
     }
    

    devDependencies 代表开发环境;
    dependencies代表生成环境,后面对应的为版本号
    对于我们依赖的这些插件库,有的是我们开发所使用的,有的则是项目所依赖的

    例如:webpackgulp等打包工具,这些都是我们开发阶段使用的,代码提交线上时,不需要这些工具,所以我们将它放入devDependencies即可

    二、创建并登录npm账号
    • 如果没有账号,首先要创建一个npm账号
    • 创建完成,你注册邮箱会收到一个确认邮件,记得验证一下
    • 然后登录你的npm账号,npm login,会让你输入用户名、密码、邮箱
    三、发布操作

    登录验证完成后, npm publish

    问题:

    如果遇到以下提示报错,说明你可能注册之后没有去验证邮箱,打开你绑定的邮箱,点击npm的验证链接即可。

    npm ERR! code E403
    npm ERR! 403 Forbidden - PUT https://registry.npmjs.org/charllote-bao - you must verify your email before publishing a new package: https://www.npmjs.com/email-edit
    

    还有一种情况,镜像源问题,首先查看你当前使用的npm源
    npm config get registry

    如果是淘宝镜像的话,需要改成npmjs

    设置npmjs源
    npm config set registry=http://registry.npmjs.org

    设置完成,npm login登录,npm publish即可发布成功

    然后再改为淘宝镜像
    npm config set registry http://registry.npm.taobao.org

    发布成功之后可以在你的npm主页看到刚发布的包

    四、更新操作

    npm version patch // 这个操作会在原先的版本号上+1,如1.0.0 会变成1.0.1
    npm publish // 重新发布

    五、删除操作

    删除指定的包和版本号
    npm unpublish 包名@版本号

    结语:

    本组件是基于vue + element-ui,通过webpack打包压缩。因为项目有个这样的需求:可以选择到某个月的某一天,element官网上的组件都是年月日或者是某个月,没有这种月日的组件。后面会继续优化,使组件扩展性更强,有其它需求或想法的都可私聊我。
    效果图先给大家看一下吧

    在这里插入图片描述
    样式的话,还需要再调整,如果有这类需求的同学们,可以关注一下博主,后面文章会更新组件的使用方法。

    组件已更新,点我进入月日组件

    展开全文
  • npm包开发规范

    千次阅读 2019-11-28 19:07:38
    npm包开发规范 1 背景: 2 Npm介绍 2 Npm 管理 2 Npm install 原理 2 Npm install 使用 2 Npm包结构 3 1.README.md 3 2.Package.json 4 Npm包代码开发注释规范 5 背景: 团队开始尝试使用npm私有仓库来共享代码,那...

    目录
    npm包开发规范 1
    背景: 2
    Npm介绍 2
    Npm 管理 2
    Npm install 原理 2
    Npm install 使用 2
    Npm包结构 3
    1.README.md 3
    2.Package.json 4
    Npm包代码开发注释规范 5

    背景:
    团队开始尝试使用npm私有仓库来共享代码,那就涉及npm的一些使用方法规范以及npm包的开发规范,本文档既为代码共享发布npm仓库进行一些参数解释和npm包发布的强制要求。
    Npm介绍
    npm是用来管理nodejs第三方包的一个工具,利用它可以
    1.安装本地包/全局包 ;
    2.将自己写的包发布到npmjs上面去,供全世界的开发者使用;
    npm在安装好node之后,就会自动安装到node的安装目录中,一般是安装在node根目录的node_modules的子文件夹下,比如我的npm就安装在 C:\Program Files\nodejs\node_modules
    如何测试npm是否安装成功,在终端中输入 npm -v 如果能出现版本号就表示安装成功。
    Npm 管理
    NPM 帮助 Node 完成第三方模块的发布、安装和依赖。可以直接执行$ npm 查看所有命令。
    使用$ npm init 可以快速生成一个 package.json 文件。
    Npm install 原理
    使用 npm install安装依赖包是 NPM 最常用的功能,例如执行npm install express后,npm 向 registry 查询模块压缩包的网址,下载压缩包后 NPM 会在当前的 node_module 目录下创建 express 目录,将包解压还原在此。
    registry 是 NPM 模块仓库提供了一个查询服务,例如 npmjs.org 的查询服务网址 https://registry.npmjs.org/ ,加模块名 https://registry.npmjs.org/vue 就得到包含 Vue 模块所有版本的信息 JSON 对象,也可以使用$ npm view vue查询。
    Node 项目使用require(‘express’)引入 express 模块时,require()方法在路径分析时按照模块路径查找策略,沿当前路径向上逐级查找node_module目录,最终定位到 express 目录。
    包的安装和模块引入是相辅相成的, 可以进一步理解 Node 模块加载原理。
    Npm install 使用
    npm install默认将包和 package.json 的依赖关系保存在dependencies,但在可以通过一些额外的标志来控制它们的保存位置和方式:
     -P or --save or --save-prod: 依赖在dependencies,默认值.
     -D or --save-dev: 依赖在 devDependencies.
     -O or --save-optional: 依赖在 optionalDependencies.
     --no-save: 防止包依赖保存在 dependencies.
    例如 npm install express -D 就会将 express 依赖关系保存在devDependencies。

    在npm install一个模块时经常纠结要安装在devDependencies还是dependencies,从字面意思看前者用于生产环境,后者用于开发环境。

    在官方的定义中,如果环境变量 NODE_ENV 设置为 production,执行 npm install --production 时 npm 会默认安装dependencies里面的依赖项,不会去安装devDependencies里的。并且推荐dependencies里配置正式运行时必须依赖的插件,devDependencies通常用来放我们开发或测试的工具,比如 Webpack,Gulp,babel,eslint等。

    在实际开发过程中,Node 包的安装是依据 require/import 模块机制,无论是-P还是-D指令都会把依赖下载到 node_modules 文件夹,-P还是-D只是修改了dependencies对象,在安装这个库进行开发调试的时候,可以通过npm install一键安装这两个目录下所有的依赖。
    Npm包结构
    ------ src // 源代码目录 比如coffee,typescript,es6+等代码的目录
    ------ lib // 转义生成的代码目录,比如babel转义后的es5代码的目录
    ------ docs // 代码相关的设计和使用文档
    ------ README.md // 包说明
    -------package.json // 用于定义了这个项目所需要的各种模块,以及项目的配置信息(比如名称、版本、许可证等元数据)
    在这里边有两个是比较重要的配置和编写要求的文件一个是README.md另一个是package.json文件
    1.README.md
    1.1README.md作用及规范
    作用:
    README.md文件是一个npm包的入门手册,里面介绍了npm包达到什么样子的效果、需要搭建什么样的环境、具备什么样的技能等等。所以README文件写得好不好,关系到这个项目能不能更容易的被其他人使用。下面详细的介绍一下README.md文件要怎么写可以更好更直观。

    命名规范:
    (1) README采用全大写,主要是可以跟代码文件直观的区分开,readme.md乍一看有点像是代码文件,不够直观。这不够体现出它优先其他工程文件被阅读的初衷;
    (2) README文件的后缀名采用是.md。该种后缀的文件主要是采用markdown规则编写的。采用markdown规则可以很方便的在文本中添加格式,编写的关注点转移到文档内容本身,而不需要像富文本那样要一直修改内容格式,或者像txt文本文档那样没有格式,会造成阅读混乱;
    内容结构:
    (1) [功能描述]:主要描述一下这个项目的主要功能列表。
    (2) [开发环境]:罗列使用本工程项目所需要安装的开发环境及配置,以及所需软件的版本说明和对应的下载链接。
    (3) [项目结构简介]:简单介绍项目模块结构目录树,对用户可以修改的文件做重点说明。
    (4) [测试DEMO]:此处可以简单介绍一下DEMO程序的思路,具体实现代码放在example文件夹中。
    (5) [作者列表]:对于多人合作的项目,可以在这里简单介绍并感谢所有参与开发的研发人员。
    (6) [更新链接]:提供后续更新的代码链接。
    (7) [历史版本]:对历史版本更改 记录做个简单的罗列,让用户直观的了解到哪些版本解决了哪些问题。
    (8) [联系方式]:可以提供微信、邮箱等联系方式,其他人对这个工程不明白的地方可以通过该联系方式与你联系。
    2.Package.json
    2.1.package.json作用及使用简介
    作用:
    package.json就是管理你本地安装的npm包,用于定义了这个项目所需要的各种模块,以及项目的配置信息(比如名称、版本、许可证等元数据)。一个package.json文件可以做如下事情:

    1. 每个Node项目中及第三方包中都必须的;
    2. 它描述着Node项目或是第三方包的一些信息;
    3. 透过这些信息可以知道该Node项目或是第三方包运行起来要依赖于哪些第三方包;
    4. 还可以在里面写一些终端执行脚本,在package.json的scripts中进行定义;
    5. 展示项目所依赖的npm包
    6. 允许你指定一个包的版本[范围]
    7. 让你建立起稳定,意味着你可以更好的与其他开发者共享
      使用简介:
      1.打开终端cmd或是powershell
      2.切换到该Node项目的根目录下面去
      3.执行 npm init -y 或是 npm init 生成package.json
      4.在开发过程中安装第三方包的时候这样写 npm install --save 或是
      npm install --save-dev

    注意:
    1.使用 npm init -y 的时候一定要注意,项目名称不能是中文,否则报错
    2.npm init 生成package.json的时候,按照要求一步一步来
    3.如果是开发阶段需要的第三方包,使用 npm install --save-dev
    4.如果是运行阶段需要的第三方包,使用 npm install --save

    package.json一些重要属性说明:
    name : 项目或是第三方包的名称,也是其它项目导入时require()中的名称
    description : 这个项目或是第三方包功能的描述
    main : 项目或是第三方包的入口文件
    license : 授权方式,一般写MIT
    keywords : 发布到npmjs中之后,其它开发者搜索我们这个第三方包的关键

    scripts : 以后在终端执行的脚本
    devDependencies : 开发阶段依赖的包
    dependencies : 运行阶段依赖的包
    author : 作者
    version : 版本号
    Npm包代码开发注释规范
    注释说明:
    一. data属性说明:
    1、单行属性,注释写在行尾
    good:
    activeName: ‘actList’,// 活动名称
    bad:
    // 活动名称
    activeName: ‘actList’,
    2、多行属性,注释写在行上
    good:
    // 表格配置
    tableConfig: [
    {
    name: “SKU”,
    val: “product_model”
    }, {
    name: “活动已售”,
    val: “sold”
    }, {
    name: “待拼成订单”,
    val: “pending”
    },
    ],
    bad:
    tableConfig: [ // 表格配置
    {
    name: “SKU”,
    val: “product_model”
    }, {
    name: “活动已售”,
    val: “sold”
    }, {
    name: “待拼成订单”,
    val: “pending”
    },
    ],
    3、Array>Object结构的,只注释第一个对象内部属性接可。
    good:
    tableConfig: [
    {
    name: “SKU”,//表头名字
    val: “product_model”//对应的接口字
    }, {
    name: “活动已售”,
    val: “sold”
    }, {
    name: “待拼成订单”,
    val: “pending”
    },
    ],
    bad:
    tableConfig: [
    {
    name: “SKU”,//表头名字
    val: “product_model”//对应的接口字
    }, {
    name: “活动已售”,//表头名字
    val: “sold”//对应的接口字
    }, {
    name: “待拼成订单”,//表头名字
    val: “pending”//对应的接口字
    },
    ],
    4、Object>简单类型的,每一个属性都进行说明,书写位置,规则如上。
    good:
    params: {
    email: null,// 邮箱
    name: null,// 名称
    },
    bad:
    params: {
    // 邮箱
    email: null,
    // 名称
    name: null,
    },
    二. props、computed、watch说明:
    统一采用行上注释
    三. methods说明:
    方法分为两种类型:
    1、无参型
    2、有参型
    [1]、无参型,需进行功能说明。格式采用 “//”
    good:
    // 重置
    reset(){
    this.params = {}
    this.page = 1
    this.per_page = 10
    this.search()
    },
    bad:
    /**

    • @desc 重置
      /
      reset(){
      this.params = {}
      this.page = 1
      this.per_page = 10
      this.search()
      },
      [2]、有参型,需进行功能、参数、返回值说明。如果是单参的,可以采用双斜线在功能后追加说明。
      good:
      // 获取全选的数组 languages [Array] 获取数据的表单名称
      filterSelectAll(languages){
      let arr = []
      for(let i = 0;i<languages.length;i++){
      arr.push(languages[i].key)
      }
      this.selectArr = arr
      },
      bad:
      3、如果是多个参数的,采用多行注释
      good:
      /
      *
      *@desc 改变状态
      *@param id [String] 改变对象的id
      *@param status [String] 改变对象的status
      *@return config [Object] 配置对象
      */
      changeStatus(id, status) {
      let self = this
      return config = {
      url: api.changeBannerStatus,
      loading: “loading”,
      param: {
      banner_position_id: id,
      status: status
      }
      };
      bad:
      // 改变状态 id [String] 改变对象的id ; status [String] 改变对象的status;return config [Object] 配置对象
      changeStatus(id, status) {
      let self = this
      return config = {
      url: api.changeBannerStatus,
      loading: “loading”,
      param: {
      banner_position_id: id,
      status: status
      }
      };
      or:
      // 改变状态
      // id [String] 改变对象的id
      // status [String] 改变对象的status
      // config [Object] 配置对象
      changeStatus(id, status) {
      let self = this
      return config = {
      url: api.changeBannerStatus,
      loading: “loading”,
      param: {
      banner_position_id: id,
      status: status
      }
      };
      四. vue配置项说明:
      统一行上注释,格式 //
      good:
      export default {
      // 组件名称
      name: ‘comName’,
      // 父子通信
      props: {},
      // 注册组件
      components: {},
      // 数据
      data() {
      return {}
      },
      // 方法
      methods: {},
      // 数据init
      created(){},
      // DOM加载完成
      mounted(){}
      }
    展开全文
  • 第一步: 首先我们去npm官网注册一个账号。 如果你的username一直不能注册成功,可以在你的... ...npm init ...package name: (testpublish) //名,可更改,也可以使用默认(直接回车) version: (1.0.0) 0....

    本博主会持续更新各种前端的技术,如果各位道友喜欢,可以关注、收藏、点赞下本博主的文章。

    第一步:

    首先我们去npm官网注册一个账号。

     如果你的username一直不能注册成功,可以在你的username前面加一个~,就可以注册成功了。

    第二步: 

    1.新建一个项目

    2.生成package.json文件

    npm init

    package name: (testpublish) //包名,可更改,也可以使用默认(直接回车)
    version: (1.0.0) 0.0.1 //版本,可更改,也可以使用默认(直接回车)
    description: 演示上传npm包 //项目描述,方便别人了解你的模块作用,搜索的时候也有用
    entry point: (index.js) //指定了程序的主入口文件,可更改,也可以使用默认(直接回车)
    test command: //测试命令(直接回车)
    git repository: //git仓库(直接回车)
    keywords: //一个字符串数组,方便别人搜索到本模块,可更改,也可以使用默认(直接回车)
    author: Heath //作者,可更改,也可以使用默认(直接回车)
    license: (ISC) //你可以在https://spdx.org/licenses/这个地址查阅协议列表 ,可更改,也可以使用默认(直接回车) 

    3.新建index.js文件

    因为上面生成package时,使用的主文件叫index.js,所以我们这边新建index.js文件。 

    这边我们随便写一个用户名脱敏的功能:

    module.exports.$hideName = function (name) {
        var length = name.length;
        var temp = "";
        for (var i = 0; i < length - 2; i++) {
            temp += "*";
        }
        if (length <= 2) {
            name = name.substring(0, 1) + "*";
        } else {
            name = name.substring(0, 1) + temp + name.substring(length - 1, length);
        }
        return name;
    };

    4.新建README.md文件

    README.md文件是一个项目的入门手册,里面介绍了整个项目的使用、功能等等

    # testpublish
    演示上传npm包
    
    # 快速上手
    ## 安装
    ```shell
    npm install testpublish
    ```
    ## 全局注册(在main.js文件里注册)
    ```javascript
    import testpublish from 'testpublish';
    global.testpublish = testpublish;
    ```
    ## 局部注册(在你所使用的vue里注册)
    ```javascript
    import testpublish from 'testpublish';
    ```
    ## 例子
    姓名脱敏
    ```javascript
    let str = testpublish.$hideName("张三");
    ```
    
    
    #目录
    * [1.姓名脱敏](#hideName)
    
    ```
    <h6 id="hideName">1.姓名脱敏</h6>
    
    ```javascript
    //返回字符串
    let str = testpublish.$hideName("张三");
    ```

     三、上传npm包

    1.npm登录 

    npm login

     1.1如果登录时出现下面错误时

    这个原因是因为你使用的是淘宝镜像,所以只要切npm路径就可以了。

    npm config set registry http://registry.npmjs.org/

     1.2如果登录时出现下面错误时

    这个问题应该是用户名前面没有加~的原因 

    2.上传

    npm publish

     如果上传时出现下面错误

     这个是因为包名冲突,也就是npm上已经有了这个包,所以我们只需要在package上改一下名字(比如我就改成了demonstration-publish这个包名)

    {
      "name": "demonstration-publish",
      "version": "0.0.1",
      "description": "演示上传npm包",
      "main": "index.js",
      "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1"
      },
      "author": "Heath",
      "license": "ISC"
    }
    

    改为包名后,npm publish一下就可以了。

    登录npm官网,即可看到你刚才上传上去的包。

    四、更新包

    因为改成更改了包名,所以我们需要更改README.md文件

    # demonstration-publish
    演示上传npm包
    
    # 快速上手
    ## 安装
    ```shell
    npm install demonstration-publish
    ```
    ## 全局注册(在main.js文件里注册)
    ```javascript
    import publish from 'demonstration-publish';
    global.publish = demonstration-publish;
    ```
    ## 局部注册(在你所使用的vue里注册)
    ```javascript
    import publish from 'demonstration-publish';
    ```
    ## 例子
    姓名脱敏
    ```javascript
    let str = publish.$hideName("张三");
    ```
    
    
    #目录
    * [1.姓名脱敏](#hideName)
    
    ```
    <h6 id="hideName">1.姓名脱敏</h6>
    
    ```javascript
    //返回字符串
    let str = testpublish.$hideName("张三");
    ```

     

    修改版本号后,上传就可以了

    {
      "name": "demonstration-publish",
      "version": "0.0.2",//这边修改为0.0.2
      "description": "演示上传npm包",
      "main": "index.js",
      "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1"
      },
      "author": "Heath",
      "license": "ISC"
    }
    
    //执行
    npm publish

    五、使用自己上传上去的npm包

    首先我们打开一个vue项目,然后执行下面命令,包名demonstration-publish改为你们上传上去的包名。

    npm install demonstration-publish

    安装完后,你可以在node_module里看到这个包。

     

    <!--/* eslint-disable */-->
    <template>
      <div>
        {{name}}
      </div>
    </template>
    
    <script>
      import publish from 'demonstration-publish';//引入包
      export default {
        name: 'test',
        data () {
          return {
            title: '测试我们上传的包',
            name: '张珊珊'
          }
        },
        methods: {//方法
        },
        created(){//渲染前执行
          document.title = this.title;
          this.name = publish.$hideName(this.name);
        },
        mounted(){//渲染后执行
        },
        computed: {},
      }
    </script>
    <!-- Add "scoped" attribute to limit CSS to this component only -->
    <style scoped>
    
    </style>
    
    

    以上就是所有过程,有什么不理解的,欢迎大家评论。

    展开全文
  • 2、制作一个npm 3、将上传或更新到npm 4、在新项目中使用你已经发布的 步骤一:登录npm官网,注册一个npm账号,然后注册完后,官网会给你发送相关的邮件,你去你的邮箱根据提示进行操作,验证通过即可 步骤...

    大概步骤:

    • 1、登录npm官网(https://www.npmjs.com/),注册一个npm账号
    • 2、制作一个npm的包
    • 3、将包上传或更新到npm
    • 4、在新项目中使用你已经发布的包

    步骤一:登录npm官网,注册一个npm账号,然后注册完后,官网会给你发送相关的邮件,你去你的邮箱根据提示进行操作,验证通过即可

    步骤二:制作一个npm的包

    • 1、创建一个文件夹,如:npmDemo1
    • 2、进入文件夹npmDemo1,执行命令:npm init,在此过程中你可以一路回车,那么此时你的包名跟你的文件夹名字一样,即:npmDemo1
    • 3、在文件夹 npmDemo1 下创建一个 index.js 文件
      index.js
    exports.run = function() {
      console.log('这是一个run方法');
    }
    

    步骤三:将包上传或更新到 npm

    • 1、在文件夹 npmDemo1 中,执行登录命令:npm login ,输入你在npm官网的账号、密码和邮箱
    npm login
    
    • 2、登录成功后,执行命令: npm publish 来发布上传你的包(npmDemo1)
    npm publish
    
    • 3、发布上传后,你可以去 npm 官网上查一下自己的包有没有存在

    • 在这里插入图片描述

    • 4、当你突然想起要在你已经发布的包中添加一些东西,然后进行更新:
      index.js

    exports.run = function() {
      console.log('这是一个run方法');
      console.log('再次强调一句:这是一个 run 方法')
    }
    
    1、修改包的版本 package.json中的 version
    2、npm login
    3、npm publish
    

    步骤四: 在新项目中使用你已经发布的包

    • 1、创建一个新的文件夹,如 test
    • 2、在test文件夹中,执行命令: npm init
    • 3、下载你发布的包 npmDemo1: npm install npmDemo1
    • 4、在文件test中创建index.js文件,使用包 npmDemo1
    const npmDemo1 = require('npmDemo1');
    
    npmDemo1.run();
    
    • 5、、在文件test中执行命令 node index.js ,可以看到输出:
    这是一个run方法
    再次强调一句:这是一个 run 方法
    

    总结:

    1、npm 包其实一个组件或者方法或文件,使用npm的发布命令publish,其实本质上就是把这些上传到npm仓库进行
    
    统一化管理,当你在开发项目的过程中,你可以根据自己的需求把相应的包拉取到你的项目中进行使用;
    
    
    
    2、npm 包中的package.json文件的main字段就是用来指定包的入口文件,当你在新项目中引入包:const 
    
    npmDemo1 = require('npmDemo1') 时,就会从你项目的node_modules中寻找到 npmDemo1,找到后就会查看这
    
    个文件下的package.json的main字段对应的入口文件,所以当你 const npmDemo1 = require('npmDemo1') 
    
    时,就是相当于你引入这个入口文件index.js,所以npmDemo1变量就有了run方法,也就可以打印出 run方法中的内
    
    容。
    

    补充:npm publish时一直报错的解决方案:

    • 1、npm官网注册好账号后,是否有进行邮箱验证,如果没有,请先进行邮箱验证
    • 2、检查淘宝镜像是否是: http://registry.npmjs.org/,如果不是,可以执行下面的命令进行设置,或者使用nrm进行切换镜像源:
    npm config set registry http://registry.npmjs.org/
    

    nrm ls
    nrm use npm
    

    3、检查包名是否被使用过,如果使用过,可以修改包名(即修改package.json中的 name),再重新 npm publish

    展开全文
  • npm包发布流程 正式包和测试包beta

    千次阅读 2020-11-10 11:39:27
    最好的测试方式就是,在命令行里面输入npm install 你要取的名字,如果报错,那么很好,npm上没有跟你同名的,你可以放心大胆地把发布出去。如果成功下载下来了。。。那么很不幸,改名字吧。。。 version
  • 一、注册npm用户 npm注册官网 ...成功之后,npm会把认证信息存储在~/.npmrc中,可查看npm当前使用的用户: $ npm whoami 三、发布 $ npm publish 如果没什么意外到这就发布成功了,可以到npm
  • npm包的发布以及npm包的版本管理

    千次阅读 2020-03-24 15:47:18
    (master) npm version patch v0.1.1 ➜ xxx git:(master) npm version prerelease v0.1.2-0 ➜ xxx git:(master) npm version premajor v1.0.0-0 ➜ xxx git:(master) npm version major v1.0.0 ----确定版本部分...
  • npm安装私有仓库npm包

    千次阅读 2020-08-14 11:00:19
    在项目开发过程中,当我们需要在不同项目中引用公共的自定义npm包的时候,我们优先想到的是将npm包发布到npm官方服务器上,然后在不同的项目上引用就行了 但是由于种种原因,我们的包不能发布到公网,只能发布到内网...
  • ... 二、创建知识库,有3种类型,这次暂时只用到1种 三、创建npm(hosted)私有仓库 ...五、创建一个npm包,发布到建立的私服 1、桌面创建一个yx-test-local文件夹,里面包含index.js和package.json (1)cd ~...
  • 为了以后方便参与工作,记录常用下载,以及官方地址 cnpm (cnpm淘宝镜像) npm install -g cnpm --registry=https://registry.npm.taobao.org express-generator(快速生成node服务器骨架) 下载 ...
  • 微信小程序中npm包及插件使用

    千次阅读 2020-12-29 20:59:48
    微信小程序使用npm包 1、微信小程序如何引入npm包? 2、为什么使用npm包需要有构建npm的操作? 官方原理介绍: 首先 node_modules 目录不会参与编译、上传和打包中,所以小程序想要使用 npm 包必须走一遍“构建 ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 242,140
精华内容 96,856
关键字:

npm包