我整理下问题吧。我在开发引入Apollo全家桶,然后小程序构建npm后,出现一系列包依赖关系的问题。
左图是npm源码原本的目录结构,经过小程序构建npm后变成右图的目录结构了。
第一张是原本npm源码引用依赖包的写法,后面两张就是小程序构建npm后graphql包引用依赖包的写法。
构建npm完成后,引用相关包后,开始报错。
这是根据错误信息找到源码报错的那一行代码,和构建前源码引用的包的写法倒是一样,但目录结构已经改变了,所以就报错了。
把代码改成这样,报错就消失了,然后鼠标点击grapql,发现grapql指向的是本地一个ts文件,而不是指向构建npm生成miniprogram_npm目录。
这个index.d.ts文件的内容
他好像将原本graphql目录下的东西都从这里引入,最后引用的时候只需要引用graphql就行,而不需要引用graphql下一个目录,但其他包引用graphql的时候并没有发现目录改变,所以导致一堆报错,这个算不算构建npm包的问题
这边采取独立引入(懒得拆 apollo-boost 了)和简单修改。首先添加:
apollo-client apollo-link-http apollo-cache-inmemory graphql-tag wx-apollo-fetcher
然后执行构建 npm。之后添加 graphql,并直接把 node_modules 下 graphql 文件夹 copy 到 miniprogram_npm 下,解决“graphql/language/...”等类似引用路径问题(不想一个个去改了)。
解决 process is not defined 问题:
在 miniprogram_npm 里的
apollo-client/index.js apollo-utilities/index.js apollo-cache-inmemory/index.js
文件中添加声明
// module.exports = (function() { var process = { env: { NODE_ENV: `production` } }; // var __MODS__ = {}; // ...
引入包:
const { ApolloClient } = require('apollo-client'); const { createHttpLink } = require('apollo-link-http'); const { InMemoryCache } = require('apollo-cache-inmemory'); const wxApolloFetcher = require('wx-apollo-fetcher').default; const gql = require('graphql-tag')
注意 fetcher 的引入。
请问后面怎么解决了?npm构建很难成功啊,不知道为什么有那么多问题都没人解决。
因为这个文件夹下面没有 index.js 这个文件
但有一些包本身是没有index.js 这文件的啊,现在的问题是引入graphql 这个包,其他依赖他的包找不到graphql下里面的模块
这个npm包的结构是这样的,开发软件构建后下面的文件都找不到了,然后依赖的模块就找不到了
报这样的错。
应该就是这行的模块没找到,是构建npm的时候,压缩的时候路径没搞对吗?
没人管这个问题了吗,小程序构建NPM,进行压缩的时候导致包之间的依赖关系出现问题