微信小程序-第一个npm项目创建

微信小程序-第一个npm项目创建

第一种方式:简单的创建方式

1、微信开发工具正常流程新建小程序

2、在根目录添加package.json文件

{
  "name": "master_weapp",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {},
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@vant/weapp": "^1.9.2",
    "is-array": "^1.0.1"
  }
}

添加依赖模块之后,npm install 或者 yarn install

3、执行下面步骤三和四

第二种方式根据官方模板修改

参考微信官方文档

第一步,默认的构建 npm 方式

默认情况下,在 miniprogramRoot 内正确配置了 package.json 并执行 npm install 之后,其构建 npm 的结果是,为每一个 package.json 对应的 node_modules 构建一份 miniprogram_npm,并放置在对应 package.json 所在目录的子目录中。参考 demo

最简单有效的导入方式,点击 demo就可以了。

构建npm前

├── miniprogram
│   ├── app.js
│   ├── app.json
│   ├── app.wxss
│   ├── index
│   │   ├── 略
│   ├── node_modules // 可被默认方式构建 npm,因为它在 miniprogramRoot 内
│   ├── package.json
│   └── sub_package
│       ├── node_modules // 可被默认方式构建 npm,因为它在 miniprogramRoot 内
│       ├── package.json
│       └── sub_package_page
├── node_modules // 不被默认方式构建 npm,因为它不在 miniprogramRoot 内
├── package.json
└── project.config.json // 其中存在配置 `"miniprogramRoot": "./miniprogram"`

以下步骤使用是这样的目录,删除miniprogram文件夹下的node_modules、package,json、sub_packager文件如下:

├── miniprogram
│   ├── app.js
│   ├── app.json
│   ├── app.wxss
│   ├── index
│   │   ├── 略
├── node_modules // 不被默认方式构建 npm,因为它不在 miniprogramRoot 内
├── package.json
└── project.config.json // 其中存在配置 `"miniprogramRoot": "./miniprogram"`

第二步,修改:project.config.json

开发者工具创建的项目,miniprogramRoot 默认为 miniprogram,package.json 在其外部,npm 构建无法正常工作。

需要手动在 project.config.json 内添加如下配置,使开发者工具可以正确索引到 npm 依赖的位置。

{
  ...
  "setting": {
    ...
    "packNpmManually": true,
    "packNpmRelationList": [
      {
        "packageJsonPath": "./package.json",
        "miniprogramNpmDistDir": "./miniprogram/"
      }
    ]
  }
}

第三步,本地设置修改

[图片上传失败...(image-c03fb6-1637215662167)]

步骤四 构建 npm 包

打开微信开发者工具,点击 工具 -> 构建 npm,并勾选 使用 npm 模块 选项,构建完成后,即可引入组件。
[图片上传失败...(image-c5a0e4-1637215662167)]

注: npm install 之后再构建npm

导入想要模块就可以使用了。具体参考官网

你可能感兴趣的:(微信小程序-第一个npm项目创建)