用npm命令开始一个微信小程序开发者工具项目
发表时间：2023-09-09 07:28:44
文章来源：炫佑科技
浏览次数：222
菏泽炫佑科技 菏泽炫佑小程序开发 菏泽炫佑app制作 炫佑科技
用npm命令开始一个微信小程序开发者工具项目
文章来自：中文网
微信小程序的API实现需要考虑到方方面面，所以还是采用写法。
众所周知，-Hell（回调地狱）是传统JS语法中的一个历史问题。 但毕竟得心应手的工具才是开发效率的源泉，所以作者对当前版本的微信小程序API做了简单的封装——weapp。
同时，微信小程序框架本身专注于交互和UI实现，并没有提供内置的状态管理。 如果很多异步操作直接在App或者Page中一一实现的话，相信会很难开发，也很难测试。
因此，我为微信小程序实现了一个基于Redux方案的状态管理模块，方便小程序中的应用程序状态管理 redux-weapp 。
特别是微信小程序在构建（编译）时不支持App范围之外的文件，所以npm在这里不太好用。
因此，我们需要在应用程序本地实时构建依赖，并在微信小程序中引用本地的依赖。
对于这个构建场景，我认为是*方便的解决方案。
开始之前用npm命令开始一个微信小程序开发者工具项目，需要准备好安装工具和依赖模块，下载微信小程序开发工具
开发工具是NW.js模拟的环境。 在微信里，就是环境。
但不用担心，它们只是两个不同的虚拟机，但本质上是相同的。
NW.js可能有一些小bug，编写代码时注意一下即可。
使用npm命令启动微信小程序项目
我的应用程序
npm 初始化
开始安装必要的依赖模块
因为除了小程序运行时需要的模块之外，还有构建时需要的模块。
看起来可能很多，但不用担心，大多数都是声明性的，不需要您直接调用它们。
为了方便经验较少的同学理解，我会一步步安装这些依赖。
首先是代码翻译工具Babel：
--save-dev babel-cli babel-core babel- babel--add-- babel- babel-- babel--stage-0
通过上述模块，您可以在构建时将 ES6/7 代码翻译为 ES5 代码（事实上，解释器只识别 ES5）。
接下来我们安装打包工具：
--保存-dev
我们只需要打包代码，不需要dev和hot函数。
因此，我们只需要安装自身即可，无需安装其他扩展和插件。
接下来，让我们安装 Redux：
redux-thunk --save-dev
需要注意的是，由于在实际应用中，我们经常需要异步调用API服务器接口，因此我们还需要redux-thunk模块来处理异步行为。
然后安装开发小程序辅助模块：
//redux-weapp--save-dev
其中weapp模块是针对微信小程序API的，提供了更易用的API微信小程序开发下载，而redux-weapp则基于Redux来管理微信小程序的状态。
创建项目目录结构
10
11
12
13
14
15
我的应用程序
|- es6 # 源代码
|- myapp.js # 这个文件在app.js文件中
|- lib # 存放编译好的js文件
|- pages #小小程序页面定义
|-
|-.js
|-.json
|-.wxml
|- .wxss
...
|- app.js #小小程序入口文件
|-app.json
|- 应用程序.wxss
|- ..js # 配置文件
编写构建脚本
首先你要写..js，这个是必须的。
由于本次构建是为了本地化微信小程序的依赖，所以我们只处理JS文件。 如果需要打包其他资源，请自行研究。
而且，值得注意的是，微信小程序包有1MB的上限。
10
11
12
13
14
15
16
17 号
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
//..jsvar path=('path'), =('')var ={
test:/\.js$/,//也可以使用.es6作为文件扩展名，然后在这里定义对应的
:'通天塔',
query: {//代码翻译默认，不包含ES新特性，需要在具体代码中显示
: ["","阶段 0"]
},//指定翻译es6目录下的代码
: path.join(,'es6'),//指定不翻译的代码
: 路径.join(,'')
}.={// 选项，建议开发时包含，版本时删除（节能减排）
: null,//指定es6目录为目录，这样下面的入口部分就会少一些`../`。
: path.join(,'es6'),//定义要打包的文件//例如：`{entry: {out: ['./x','./y','./z'] }} ` 表示：将x、y、z等文件打包成一个文件，命名为：out//具体请参考文档
入口： {
myapp:'./myapp'
},
: {//将打包后的文件输出到lib目录下
path: path.join(,'lib'),//将打包文件命名为myapp，`[name]`可以理解为模板变量
:'[name].js',//规范为`umd`，兼容amd，具体请参考文档
: '嗯'
}, : {
：[]
},
：{
: ['', '.js'],//指定es6目录为加载目录，这样/时文件会自动在这个目录下（可以省很多../）
: ['es6','']
},
:[ new .(),//通常需要区分dev和dev。 建议定义该变量 //编译后会在 .({'.env': {'': JSON.('' ) 中定义 `.env`
})
定义 npm 命令
首先是代码测试命令测试。
由于我喜欢使用Jest，所以这里也以Jest为例。
// .json"": { "": " es6", //推荐静态检查 "test": "jest",
...
},
..., // jest 允许在 .json 中定义配置 "jest": { "": false, "bail": true, "": { ".js": "//babel-jest" //使用巴贝尔翻译
},"": ["/测试/"
],"":".test.js$","": ["//"
],"ns": ["//"
接下来就是激动人心的构建命令了。成败全靠这个
