让Browserify的require路径更像RequireJS

Question

我发现在移动文件并且需要不断地重写文件包含路径以使其相对于新的文件夹位置是一件麻烦的事情。

我希望在我的browserify代码中避免这种情况：

var View = require('../../../../base/view');

我希望你能做更符合 RequireJS 的事情，它知道我的基础路径是 js：

var View = require('base/view');

- Abadaba

---

在browserify文档中有一个名为opts.basedir的选项，我理解它可以做到你想要的： opts.basedir是browserify从中开始捆绑以.开头的文件的目录但是，我自己无法让它工作（使用gulp-browserify）。 - eightyfive

@8y5 这是针对第一个 JS 文件的，对吧？而不是整个 JS 树。所以似乎并没有解决问题。 - Sebastien Lorber

@SebastienLorber确实basedir不能解决问题。opts.paths是@Abadaba正在寻找的。我在这里用更多的细节回答了自己的问题：https://dev59.com/QGEh5IYBdhLWcg3waC5t#22601755 - eightyfive

Answer 1

你应该使用paths选项。这个选项在browserify文档中没有记录，但是在node-browser-resolve中有记录（在底层使用）：

引用：

paths - 如果在常规的node_modules递归查找中未找到任何内容，则使用require.paths数组

- eightyfive

---

请访问以下链接以了解如何清理Browserify的require问题： https://derickbailey.com/2015/09/30/cleaning-up-browserifys-require-problem/ - Mojtaba Pourmirzaei

Answer 2

这里有一个很好的选择，就是使用 aliasify 插件，可以在 这里 找到。然后只需向您的 package.json 添加类似以下内容的信息，其中 aliasify 配置中的所有路径都相对于该文件的位置：

  "browserify": {
    "transform": [
      "aliasify"
    ]
  },
  "aliasify": {
    "aliases": {
      "app": "./src/app",
      "components": "./src/components",
      "someAlias": "./src/app/some/path/to/a/place",
      "foobar": "./go/to/a/module/named/foobar",
    }
  }

然后，在你的文件中，只需执行以下操作：

var foobar = require("foobar");
var sampleComponent = require("components/someSample");

//My JS code

- AlexZ

Answer 3

node_modules

你可以将应用程序代码（或符号链接，如果您的平台支持）放在 node_modules 目录下。例如：

node_modules/
+-- app/
    +-- js/
        +-- base/
            +-- view.js
        +-- a/
            +-- b/
                +-- c/
                    +-- somefile.js

// somefile.js                
require("app/js/base/view");

然而，这里有一个重要的警告：这会破坏通过API程序化指定的转换的应用，例如：

browserify('app/entry.js')
  .transform(es6ify)

在Browserify中，有一个与转换相关的“顶级”文件的概念。该概念以及转换的行为在Browserify文档中解释得不够清楚。您可以在此处看到有关该问题的一些讨论：substack/node-browserify#993

pathmodify

另一个选项是我的pathmodify Browserify插件。这允许使用非相对路径和编程转换。要启用像以下代码的Browserify化：

var View = require('base/view');

你可以进行如下操作：

你可以这样做：

var pathmodify = require('pathmodify');

var opts = {mods: [
  // Maps require() IDs beginning with "base/" to begin with
  // "/somedir/js/base/"
  pathmodify.mod.dir("base", "/somedir/js/base"),
]};

// Give browserify the real path to entry file(s).
// pathmodify will transform paths in require() calls.
browserify('./js/entry')
  .plugin(pathmodify, opts)
  .transform(es6ify)
  .bundle()
  ...

组合的

请注意，路径修改只能解决browserify的问题。如果您需要像base/view这样的路径在其他上下文中（如node）也起作用，则如果您有符号链接，则可以将两者结合使用。例如，将node_modules/base符号链接到/somedir/js/base，并像指示的那样配置pathmodify，继续将browserify指向node_modules之外的路径以获取入口文件。

- JMM