在小程序开发中使用本地npm

在开发中重用的代码通常被打包到npm包中，并发布到npm源。该项目将再次依赖此包。如果包的源代码发生更改，则需要在使用项目更新依赖项之前将其发布到npm。这篇文章没有发布到互联网上，只是在本地开发的。包的源代码通过内联网的svn或git进行同步。此外，此NPM还直接使用小程序开发工具开发，以便在修改包中的组件后，您可以在包自己的项目中编写示例代码以查看效果。

创建npm项目

创建一个新的小程序，然后创建包。json的根目录中，以便您可以设置自己的模块名称、版本、作者等信息。

npm init需要逐步指定参数，[-y]使用默认参数快速生成

npm初始化-y

生成的包。json文件：

{

“name”：“wx js演示”，

“版本”：“1.0.0”，

“description”：“”，

“main”：“app.js”，

“脚本”：{

“test”：“echo”错误：未指定测试“&&exit 1”

},

“关键字”：[]，

“作者”：“”，

“许可证”：“ISC”，

“依赖项”：｛｝

}

通常，npm包需要在根目录中创建一个条目文件（package.json中指定的主字段），例如索引。js，可以定制。然而，小程序有自己的规则，可以省略。

小程序npm约束。在包中，在json中添加miniprogram字段以指定公开的资源目录。此目录中的代码只能在applet工具构建npm后使用。如图所示，dist目录表示npm的外部可见内容

图像.png

使用本地npm项目

构建另一个实际开发的项目，并实现生产包Json文件的第一步。在依赖项字段中指定引用的npm项目。下面的代码给出了本地和远程项目的示例。本地路径以文件和npm项目的路径开头。因为我将它直接放在上层目录中，所以该值以“../”开头

{

“name”：“wx js演示”，

...

“依赖关系”：{

“sino迷你程序”：“文件：../sino迷你程序”，

“weui迷你程序”：“^1.0.3”

}

}

安装npm。运行npm install命令来安装这些依赖项并生成nodes_模块目录。

构建npm。在小程序开发工具中，在菜单栏中找到“build npm”函数，以生成小程序平台实际使用的目录小程序_npm，如图所示。从目录结构可以看出，引用的本地npm有更多的箭头图标。

图像.png

项目中引入了NPM组件。

在app中添加usingComponents字段。页面的json或json文件

{

“页面”：[

“页面/索引/索引”

],

“窗口”：{

“backgroundTextStyle”：“浅”，

“navigationBarBackgroundColor”：“#fff”，

“navigationBarTitleText”：“微信”，

“navigationBarTextStyle”：“黑色”

},

“style”：“v2”，

“sitemapLocation”：“sitemap.json”，

“使用组件”：{

“mp dialog”：“/miniprogram_npm/weui miniprogram/dialog/dialog”，

“sino列表框”：“/miniprogram_npm/sino-miniprogram/listBox/listBox”

}

}

风格也是如此。在app中导入文件目录。wxss或页面wxss文件

/**app.wxss**/

@导入“/miniprogram_npm/weui-miniprogram/weui-wxss/dist/style/weui.wxss”；

@导入'/miniprogram_npm/sino-miniprogram/sino-style/snui.wxss'；

.容器{

高度：100%；

显示器：柔性；

弯曲方向：柱；

对齐项目：居中；

对齐内容：间距；

填充：200rpx 0；

框大小：边框框；

}

参考资源