javascript 获取 browserify 需要路径的行为更像 requirejs

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/22051663/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-27 22:17:45  来源:igfitidea点击:

Get browserify require paths to behave more like requirejs

javascriptnode.jsrequirejscommonjsbrowserify

提问by Abadaba

I'm finding that it's a pain when moving files around and constantly having to rewrite the file include paths to be relative to their new folder.

我发现四处移动文件并且经常不得不重写文件包含路径以使其相对于他们的新文件夹是一种痛苦。

I want to avoid this in my browserify code:

我想在我的浏览器代码中避免这种情况:

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

And do something more in line with requirejs where it knows my base path is js:

做一些更符合 requirejs 的事情,它知道我的基本路径是js

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

回答by eightyfive

You should use the pathsoption. It is not documented in browserify but in node-browser-resolve(used under the hood):

您应该使用该paths选项。它没有记录在 browserify 中,而是在node-browser-resolve 中(在后台使用):

paths - require.paths array to use if nothing is found on the normal node_modules recursive walk

路径 - 如果在正常的 node_modules 递归遍历中未找到任何内容,则使用 require.paths 数组

回答by AlexZ

A great option here is to use the aliasifyplugin, available here. Then just add something like this to your package.json, with all paths in the aliasify config being relative to the position of that file:

一个很好的选择是使用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",
    }
  }

Then, in your files, just do:

然后,在您的文件中,只需执行以下操作:

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

//My JS code

回答by JMM

node_modules

node_modules

You can put your application code (or a symlink to it, if your platform supports it) under node_modules. E.g.:

您可以将应用程序代码(或指向它的符号链接,如果您的平台支持)放在node_modules. 例如:

node_modules/
+-- app/
    +-- js/
        +-- base/
            +-- view.js
        +-- a/
            +-- b/
                +-- c/
                    +-- somefile.js
// somefile.js                
require("app/js/base/view");

However, there's an important caveat: this breaks application of transforms specified programmatically via the API, e.g:

但是,有一个重要的警告:这会破坏通过 API 以编程方式指定的转换的应用,例如:

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

In browserify there's a concept of "top-level" files that comes into play with transforms. That concept, and the behavior of transforms in general, is poorly explained in the browserify documentation. You can see some discussion of the issue here: substack/node-browserify#993

在 browserify 中,有一个“顶级”文件的概念与转换有关。这个概念,以及一般的转换行为,在 browserify 文档中没有很好地解释。你可以在这里看到关于这个问题的一些讨论:substack/node-browserify#993

pathmodify

路径修改

Another option is my pathmodifybrowserify plugin. This allows using non-relative paths and programmatic transforms. To enable browserifying code like:

另一种选择是我的pathmodify browserify插件。这允许使用非相对路径和程序化转换。要启用浏览器代码,例如:

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

You would do something like:

你会做这样的事情:

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()
  ...

Combined

组合

Note that pathmodify will only solve the problem for browserify. If you need the paths like base/viewto also work in another context, like node, then if you have symlinks available you can combine the two. For example, symlink node_modules/baseto /somedir/js/base, and also configure pathmodify as indicated and continue to point browserify to paths outside of node_modulesfor entry files.

注意 pathmodify 只会解决 browserify 的问题。如果您需要路径base/view也可以在另一个上下文中工作,例如节点,那么如果您有可用的符号链接,则可以将两者结合起来。例如,符号链接node_modules/base/somedir/js/base,并且还按照指示配置 pathmodify 并继续将 browserify 指向node_modulesfor 条目文件之外的路径。