Question

我正在使用浏览器和服务器端节点中的共享React组件构建应用程序。

现在，我正在使用Marty.js来做到这一点：

function getUser() {
    if (Marty.isBrowser) {
        /* Get user using some client method */  
    } else {
        /* otherwise, use some secret server code */
    }
}

我正在通过Browserify捆绑这些功能，因此它们可以在客户端和服务器上运行。

我想要做的是完全删除捆绑中的else块，因此我不会泄漏敏感的服务器端代码。

有没有办法从捆绑中排除代码块？

Answer 1

我会创建单独的模块，一个用于浏览器，另一个用于服务器。然后在package.json中，告诉browserify使用浏览器模块：

"browser": {
    "./path/to/node-module.js": "./path/to/browser-module.js"
}

现在，无论您致电require('path/to/node-module')，browserify都会加载其他模块。

来自docs的更多信息：

浏览器字段

有一个特殊的浏览器＆＃34;您可以在每个模块的package.json中设置字段，以覆盖特定于浏览器的文件版本的文件解析。

例如，如果您希望为＆＃34; main＆＃34;设置特定于浏览器的模块入口点。字段你可以设置＆＃34;浏览器＆＃34;字段到字符串：
"browser": "./browser.js"
或者您可以基于每个文件进行覆盖：
"browser": {
  "fs": "level-fs",
  "./lib/ops.js": "./browser/opts.js"
}
请注意，浏览器字段仅适用于本地模块中的文件，与转换一样，它不适用于node_modules目录。

Answer 2

虽然我不确定是否可以使用Browserify，但你可以使用它的DefinePlugin

使用Webpack。

来自docs（稍加修改）：

示例：

new webpack.DefinePlugin({
    DEBUG: false,
    PRODUCTION: true,
    ...
})

...

示例：

if(DEBUG)
    console.log('Debug info')
if(PRODUCTION)
    console.log('Production log')

通过webpack后没有缩小结果：

if(false)
    console.log('Debug info')
if(true)
    console.log('Production log')

然后在缩小通过后导致：

console.log('Production log')

Answer 3

您可以使用环境变量envify和uglify来执行此操作。

if ('browser' === process.env.ENVIRONMENT) {
  ...
}
else {
  ...
}

在进行浏览器构建时设置process.env.ENVIRONMENT = 'browser'，使用envify转换将process.env的引用替换为其当前值，然后uglify将执行死代码删除以删除永远不会被命中的分支。

Answer 4

如何将代码放在模块中，例如UserServer，然后在为客户端编译时排除该模块？您的代码变为：

function getUser() {
    if (Marty.isBrowser) {
        /* Get user using some client method */  
    } else { 
       require('UserServer').getUser();
    }
}

Browserify提供以下选项以从捆绑包中排除文件：

--exclude, -u  Omit a file from the output bundle. Files can be globs.

Answer 5

更明确地表达您的意图，并将您的代码放在自己的文件中：

function getUser(options, callback) {
  var fn;
  if (Marty.isBrowser) {
      fn = require("./lib/users/get.browser");
  } else {
      fn = require("./lib/users/get.server");
  }
  fn(options, callback);
}

然后作为浏览器选项，你可以说＆＃34;用这个变量代替require("./lib/users/get.server")，当你看到它时：...＆＃34;这样，在构建浏览器时，您就不会构建该服务器文件。

但是，如果getUser可以根据它的运行位置做不同的事情，那么你在这里做错事的可能性更大：也许getUser应该是对你的服务器的REST调用相反，浏览器，但没有更多的信息，总是很难确定。

browserify - 排除代码块？

5 个答案: