- 需求的场景描述(希望解决的问题)
我本周开始在学习微信小程序开发,需要使用redux管理数据状态,但发现有问题?
第一步: 初始化package.json;
$npm init
第二步:安装redux;
$npm install --production redux
第三步:使用开发者工具,构建npm;构建成功后,在根目录看到 miniprogram_npm 文件夹,
第四步:小程序js文件中引用,比如 const reduxLib = require('redux');
第五步:编译小程序,此时报错了;
```
VM15166:1 thirdScriptError
sdk uncaught third Error
process is not defined
ReferenceError: process is not defined
```
错误原因是代码中有如下代码:
```
121: if (process.env.NODE_ENV !== 'production') {
```
分析:
小程序中 require 第三方包,不是直接使用 node_modules 中文件,而是开发者工具构建后miniprogram_npm文件夹,流程方案是没有问题的。
但是对于源npm包中文件代码 process.env.NODE_ENV 出现未定义该如何解决呢?
npm包中出现process.env.NODE_ENV在浏览器端肯定是不通过的,我们知道现在大部分通过webpack打包,
比如扩展 webpack.DefinePlugin 可以注入变量,在打包期间将js代码替换掉
```
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify('development')
})
```
我也查看了官方回复类似:
但没有解决,你们尝试新建一个项目,就 安装 "redux": "4.0.1" 版本,问题就重现了;
实际对于第三方npm包的方案中,解决的还不是很彻底,受限制比较多。
-----
题外尝试:node_modules 文件夹中 redux包中package.json文件,节点 "main": "lib/redux.js"文件,如果更改为 "main": "dist/redux.js",因为dist目录是打包后的文件;
则不会报错,仅仅是require不报错,功能我还未写,是否可用未知;
但我们不肯能去手动更改第三方包,多人开发,多次变更,很容易引入bug的;再者文件 "main": "lib/redux.js" 也不是源码,不是src下文件,是个中间文件,完全可用的,所以微信开发者工具应该提供编译期间变量定义或者替换。
也许自定义编译条件可以解决,能够给个详细的操作说明,文档太简单,回复更简单。
但有想想自定义编译与js代码替换似乎没关系,到底要怎么解决变量注入或者变量替换呢?
-----
- 希望提供的能力
微信开发者工具,在编译或打包时,如何给第三方包注入变量?
比如 替换掉源码包 process.env.NODE_ENV
不能在require第三方包的前面模拟一个process对象么
我的描述中,不是模拟,是微信开发者工具在”构建NPM包“过程中,让开发者有条件的替换被构建包文件。
以下是 redux/lib/redux.js文件片段
```
if (process.env.NODE_ENV !== 'production') {
if (typeof reducers[key] === 'undefined') {
warning("No reducer provided for key \"" + key + "\"");
}
}
```
以下是 redux/dist/redux.js文件片段
```
{
if (typeof reducers[key] === 'undefined') {
warning("No reducer provided for key \"" + key + "\"");
}
}
```
-----
如果提供一种方案,自定义变量配置,意思是构建过程中,对源码 process.env.NODE_ENV 替换为development
{
'process.env.NODE_ENV':'development'
}
替换后结果如下
```
if ('development' !== 'production') {
if (typeof reducers[key] === 'undefined') {
warning("No reducer provided for key \"" + key + "\"");
}
}
```
现在开发者工具在构建npm时,也是读取包文件字符串,然后外边套上模块化,封装为微信小程序包;
以下就是微信开发者工具在构建npm包时的外壳;
```
module.exports = (function() {
var __MODS__ = {};
var __DEFINE__ = function(modId, func, req) { var m = { exports: {} };
__MODS__[modId] = { status: 0, func: func, req: req, m: m }; };
var __REQUIRE__ = function(modId, source) { if (!__MODS__[modId]) return require(source); if (!__MODS__[modId].status) { var m = { exports: {} };
__MODS__[modId].status = 1;
__MODS__[modId].func(__MODS__[modId].req, m, m.exports); if (typeof m.exports === "object") { Object.keys(m.exports).forEach(function(k) { __MODS__[modId].m.exports[k] = m.exports[k]; }); if (m.exports.__esModule) Object.defineProperty(__MODS__[modId].m.exports, "__esModule", { value: true }); } else { __MODS__[modId].m.exports = m.exports; } } return __MODS__[modId].m.exports; };
var __REQUIRE_WILDCARD__ = function(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var k in obj) { if (Object.prototype.hasOwnProperty.call(obj, k)) newObj[k] = obj[k]; } } newObj.default = obj; return newObj; } };
var __REQUIRE_DEFAULT__ = function(obj) { return obj && obj.__esModule ? obj.default : obj; };
__DEFINE__(1546957715463, function(require, module, exports) {
// 原npm包中文件拷贝到此处,外层微信穿上模块衣服;
//
}, function(modId) { var map = {}; return __REQUIRE__(map[modId], modId); })
return __REQUIRE__(1546957715463);
})()
```
我的需求不是一个包使用的问题,webpack打包的包很多了,npm社区更多第三方包都会有类似问题,是不是该考虑从源头上解决,而不是一味的苛刻包的格式符合微信的,这些npm包也不是特殊包,也是行业认可的,你们说是吗?有问题解决问题,不要一味推脱;
我今天下午测试了,修改node_modules 文件夹中 redux包中package.json文件,节点 "main": "lib/redux.js"文件,如果更改为 "main": "dist/redux.js",代码不会出错,且类库可用。修改第三方包配置不是长远方案。
问题已清晰,我们讨论考虑一下
还没有答复吗? 在小程序的环境里使用一些通用的东西太麻烦,你们应该有一个方案,否则小程序很难做出好东西
2022都快过去了,都要2023了还没解决,跟坨屎一样
https://developers.weixin.qq.com/community/develop/article/doc/000ae44d0e498032109edaad856813
通过脚本文件动态修改环境变量
牛皮,马上2022年了
21年了
已经两年了这个问题还是没有解决
一年半了 这个问题解决了吗?有没有什么方案
所以这个问题有比较优雅的解决方案了吗?
https://www.npmjs.com/package/mina-webpack-plugin 了解一下