Javascript browserify-排除代码块？

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

现在，我正在使用Marty.js来执行以下操作：

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

我通过Browserify将这些功能捆绑起来，这样它们就可以在客户端和服务器上运行

我想做的是从包中完全删除

else

块，这样我就不会泄漏敏感的服务器端代码

---

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

我会创建单独的模块，一个用于浏览器，一个用于服务器。然后在

包.json

中，告诉browserify使用浏览器模块：

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

现在，无论您在哪里调用

require（'path/to/node module'）

，browserify都将加载另一个模块

---

更多信息，请访问：

浏览器字段

您可以在package.json中按模块设置一个特殊的“browser”字段，以覆盖特定于浏览器版本的文件的文件解析

例如，如果希望“主”字段具有特定于浏览器的模块入口点，则可以将“浏览器”字段设置为字符串：

"browser": "./browser.js"

或者，您可以基于每个文件进行覆盖：

"browser": {
  "fs": "level-fs",
  "./lib/ops.js": "./browser/opts.js"
}

请注意，“浏览器”字段仅适用于本地模块中的文件，与转换一样，它不适用于节点模块目录

---

将代码放入模块（例如

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.

---

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

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);
}

然后，作为一个browserify选项，当您看到它时，您可以用这个变量说“replace

require（“./lib/users/get.server”）

”，这样在为浏览器构建时就不会在服务器文件中构建

---

但是，如果getUser可以根据它的运行位置执行不同的操作，那么您更可能在这里出错：也许getUser应该是从浏览器对服务器的REST调用，但是如果没有更多信息，这总是很难确定。

虽然我不确定是否可以使用Browserify，您可以使用Webpack的DefinePlugin实现这一点

从（稍加修改）：

例如：

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

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

例如：

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

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

通过网页后，没有缩小结果：

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

console.log('Production log')

然后在缩小过程后，结果是：

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

console.log('Production log')

---

您可以使用环境变量，并执行此操作

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

---

设置

process.env.ENVIRONMENT='browser'

在构建浏览器时，使用envify转换将对

process.env

的引用替换为其当前值，然后uglify将执行死代码消除以删除永远不会命中的分支。

在浏览器中，这是一个REST调用。在Node中，它是一个本地DB调用。这是相同的后端API，有两个不同的入口点（在浏览器中，首先检查会话和其他各种内容）。这一点是为了能够生成初始渲染的SSR视图（无论URL如何），并将其返回到浏览器，所有后续的浏览器调用。关于消除死代码的提示+1-我不知道uglify做了这件事。当然，此步骤仅假设代码已缩小。。。在我的开发环境中，我使用完整的源代码+源代码映射，这仍然会公开功能。您的网页包配置很可能已经使用DefinePlugin来设置“process.env.NODE\u env”设置。