小程序中怎么进行模块化处理

这篇文章主要介绍了小程序中怎么进行模块化处理，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。

ES6和commonJS的选择

首先在微信小程序中不论是 ES6 或者是 commonJS 模块化语法都是支持的，在传统的web项目中我个人是习惯统一使用 ES6 模块化语法进行开发的。

在最初我也是将小程序中所有的通用方法抽离成单独的文件，并使用export 或 export default 导出,使用 import 引入。

注意点

但是！在实际开发中，小程序的js文件是不支持绝对路径引入的！这意味着如果你需要在你的页面中引入一个公用方法，你必须使用 ../../../xxx/xxx.js 的方式，当你同一个页面引入多个模块时，这种写法绝对会极大的打击你的开发热情。

解决方式

那我们该如何解决这么长的引入路径呢，在web项目中，我们常常会使用路径别名的方式，例如 webpack或vite 中的 resolve.alias 来缩短引入的路径。

alias: {"@src":path.resolve("src"),

但是在原生微信小程序中，虽然可以通过 gulp 或者 webpack 等一些前端工程化的工具对小程序进行一些改造，但是作为一个开源项目我希望它的启动过程不需要太多额外配置。最好是能够使用原生的语法去实现。

最终我选择了在 app.js中新增一个require方法用于引入模块，这样在页面内引入模块时，我们只需要使用app的实例来进行模块引入，这样可以实现使用与app.js文件的相对路径来引入文件.

// app.jsApp({    require(path){        return path    }})

使用方式

// 使用基于app.js的相对路径来引入文件，这样就避免了写很多"../"const app = getApp()const upload = app.require("lib/upload")

当然这样做也不是特别方便，首先是代码提示的不健全，使用以上方式的话可能对于参数或者一些返回值的提示不到位，但是影响不大。如果之后我摸索出了其他比较好的实现方式再写一篇文章解析。其次是必须使用全局统一使用commonJS 的模块化语法啦，不过这一点的话问题不大。

单页面模块化

小程序中并没有提供特殊的模块化方式，比较常用的就是将一些方法抽离为单独的js文件，然后再引入。想要避免一个页面文件代码太长的话最好的方式是组件化，但是在小程序中，认为写组件真的是一件很不爽的事情。

小程序组件拥有自己的生命周期，而且引入时必须在页面json中提前定义，由于组件是挂在在shadow root节点上，如果想要和页面共享样式例如colorUI的全局样式还需要写入单独的配置项styleIsolation。整体开发体验相比vue而言比较割裂。

基于以上的一些个人看法，我在写小程序时比较少使用组件，如果是需要抽离wxml或者是js我通常使用以下的方法。

wxml模块化

在小程序中我通常使用 模板template 进行抽离复用，微信小程序模板文档 ，模板相较于组件抽离的仅仅是部分的页面，不包含功能部分的抽离。

以下是我抽离的一个模板,这是一个文章的列表项，它并没有什么单独的功能，但是代码很长并且却在很多页面中复用到，于是我将它进行了一个抽离。把样式都通过行内样式的方式写上，这样在哪里引入都是一样的样式。