快应用 使用npm
npm 是包管理工具,允许开发者下载第三方包到本地使用,允许开发者将自己编写的包上传到 npm 服务器。推荐开发者使用 npm
通过本节,你将学会:
引入 npm 包
开发者可引入 npm 包中提供的文件,引入后即可正常使用他人编写的代码
准备工作
引入 npm 包前,需要先在本地安装 npm 包。可执行以下命令安装:
npm install <package>
其中 <package>
为 npm 包名。以 npm 包 quick-app-kit-demo 为例:
npm install quick-app-kit-demo
引入文件
本地安装 npm 包后,就可以引入 npm 包提供的文件了。根据引入文件类型的不同,引入的方法存在差异。常见文件的类型及引入方法如下:
- 组件文件
使用 <import>
引入 npm 包中的自定义组件,注意设置组件文件的相对路径。以 npm 包 quick-app-kit-demo 为例:
<import name="comp" src="<relative path to node_modules>/node_modules/quick-app-kit-demo/src/component/index.ux"></import>
- 样式文件
使用导入外部文件或合并外部文件的方式,引入 npm 包中的样式文件,注意设置样式文件的相对路径。以 npm 包 quick-app-kit-demo 为例:
<!-- 导入外部文件, 代替style内部样式 -->
<style src="<relative path to node_modules>/node_modules/quick-app-kit-demo/src/common/common.css"></style>
<!-- 合并外部文件 -->
<style>
@import '<relative path to node_modules>/node_modules/quick-app-kit-demo/src/common/common.css';
</style>
- js 文件
使用 import 引入 npm 包中的 js 文件,注意设置 js 文件的相对路径。以 npm 包 quick-app-kit-demo 为例:
import getStr from '<relative path to node_modules>/node_modules/quick-app-kit-demo/src/common/util'
发布 npm 包
开发者也可以发布 npm 包,分享和重用自己编写的代码
准备工作
- 准备好要发布的目录
- 建议目录下增加 README.md 文件,说明 npm 包的功能及用法等
- 确保目录下有 package.json 文件,若目录下没有 package.json 文件,执行以下命令初始化生成一个新的 package.json 文件
npm init
注意:暂不支持 npm 包中提供本地图片资源,请使用线上图片资源代替
发布流程
1. 注册账号
如果还没有 npm 账号,访问 npm 官网 注册账号
2. 登录账号
在本地执行以下命令,登录 npm 帐号
npm login
3. 发布 npm 包
在目录下执行以下命令,发布 npm 包
npm publish
4. 验证发布结果
访问 https://npmjs.com/package/<package>
,检查发布是否成功,其中 <package>
为 npm 包名
注意:若开发者修改过 npm 的源,需要在登录或发布前将源切回 npm
总结
推荐开发者使用 npm 包、发布 npm 包。有利于分享和复用代码,提高开发效率