收藏
回答

微信小程序npm第三方包全局变量 process.env.NODE 未定义

框架类型 问题类型 操作系统 工具版本
小程序 需求 macOS mac版:微信开发者工具 版本: 1.02.1812271

- 需求的场景描述(希望解决的问题)




我本周开始在学习微信小程序开发,需要使用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')

})

```

我也查看了官方回复类似:

https://developers.weixin.qq.com/community/develop/doc/000ece287f43202c46c6c0ad356000?highLine=process.env


但没有解决,你们尝试新建一个项目,就 安装 "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




回答关注问题邀请回答
收藏

7 个回答

  • 僵尸浩
    僵尸浩
    2019-01-09

    不能在require第三方包的前面模拟一个process对象么

    2019-01-09
    有用
    回复
  • 康
    2019-01-09

    我的描述中,不是模拟,是微信开发者工具在”构建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",代码不会出错,且类库可用。修改第三方包配置不是长远方案。

    2019-01-09
    有用 1
    回复 2
    • 僵尸浩
      僵尸浩
      2019-01-11

      问题已清晰,我们讨论考虑一下

      2019-01-11
      回复
    • 彭刚
      彭刚
      2019-06-10回复僵尸浩

      还没有答复吗? 在小程序的环境里使用一些通用的东西太麻烦,你们应该有一个方案,否则小程序很难做出好东西

      2019-06-10
      回复
  • Zhao ZW
    Zhao ZW
    10-18

    21年了

    10-18
    有用
    回复
  • 北极那企鹅丶
    北极那企鹅丶
    07-06

    已经两年了这个问题还是没有解决

    07-06
    有用
    回复
  • kouchao
    kouchao
    2020-08-17

    一年半了 这个问题解决了吗?有没有什么方案

    2020-08-17
    有用
    回复
  • 150~
    150~
    2019-05-07

    所以这个问题有比较优雅的解决方案了吗?

    2019-05-07
    有用
    回复
  • Jiacheng
    Jiacheng
    2019-01-21

    https://www.npmjs.com/package/mina-webpack-plugin 了解一下

    2019-01-21
    有用
    回复
登录 后发表内容