javascript - node - Obtener browserify requiere rutas para comportarse más como requirejs

use npm in browser

Question

Encuentro que es un problema cuando mueves archivos y constantemente tengo que reescribir el archivo, incluyendo rutas para que sean relativas a su nueva carpeta.

Quiero evitar esto en mi código de browserify:

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

Y hacer algo más en línea con requirejs donde sabe que mi ruta base es js :

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

Answer 1

node_modules

Puede poner su código de aplicación (o un enlace simbólico a él, si su plataforma lo admite) bajo node_modules . P.ej:

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

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

Sin embargo , hay una advertencia importante: esto interrumpe la aplicación de transformaciones especificadas mediante programación a través de la API, por ejemplo:

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

En browserify hay un concepto de archivos de "nivel superior" que entra en juego con las transformaciones. Ese concepto, y el comportamiento de las transformaciones en general, se explica pobremente en la documentación de browserify. Puede ver un poco de discusión sobre el problema aquí: substack/node-browserify#993

Pathmodify

Otra opción es mi complemento pathmodify browserify. Esto permite usar rutas no relativas y transformaciones programáticas. Para habilitar el código de navegación como:

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

Harías algo como:

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

Conjunto

Tenga en cuenta que pathmodify solo solucionará el problema para browserify. Si necesita que las rutas como base/view también funcionen en otro contexto, como nodo, entonces si tiene enlaces simbólicos disponibles, puede combinar los dos. Por ejemplo, symlink node_modules/base a /somedir/js/base , y también configure pathmodify como se indica y continúe apuntando browserify a rutas fuera de node_modules para los archivos de entrada.

Answer 2

Deberías usar la opción de paths . No está documentado en browserify pero en node-browser-resolve resolution (usado debajo del capó):

rutas - la matriz require.paths que se usará si no se encuentra nada en la caminata recursiva normal de node_modules

Answer 3

Una gran opción aquí es usar el complemento aliasify , disponible here . Luego simplemente agregue algo como esto a su package.json , con todas las rutas en la configuración de aliasify en relación con la posición de ese archivo:

  "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",
    }
  }

Luego, en tus archivos, simplemente haz:

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

//My JS code