了解 r.js、almond 和相对路径

Question

我看到 this answer 但据我所知，它对我不起作用。也许我在做一些愚蠢的事情。

我正在使用 almond and grunt-contrib-requirejs。我试过很多东西

这是我的布局

.
├── Gruntfile.js
├── 3rdparty
│   ├── require.js
├── src
│   ├── lib.js
│   └── main.js
└── node_modules
    └── almond
        └── almond.js

这是我的 g运行t-contrib-requirejs 配置

requirejs: {
  full: {
    options: {
      baseUrl: "./",
      name: "node_modules/almond/almond.js",
      include: [ "src/main.js" ],
      out: "dist/app.js",
      optimize: "none",
    },
  },
},

main.js 看起来像这样

requirejs(['./lib',], function(lib) {
  lib.hello();
});

lib.js 看起来像这样

define([], function() {
    return {
      hello: function() {
          console.log("hello from lib");
      },
    };
});

如果运行一个使用require.js的页面，如

<script src="3rdparty/require.js" data-main="src/main.js"></script>

运行太棒了。 You can see it live it here。检查控制台，您会看到它打印 hello from lib

所以我运行g运行t。然后我运行一个使用 dist/app.js 的页面，我得到了错误

Uncaught Error: undefined missing lib

这是一个live page。

检查生成的dist/app.js我看到lib已经变成了这个

define('src/lib',[], function() {
   ...
});

主要是像这样包含它

requirejs(['./lib'], function(lib) {
  ...
});

换句话说，r.js 生成的 id src/lib 与 main 引用的 id 不匹配 ./lib.

这似乎是 r.js 的一个非常直接的例子。实际上就像 "hello world".

我做错了什么？

我试过的一件事是将 baseUrl 更改为 ./src

requirejs: {
  full: {
    options: {
      baseUrl: "./src",
      name: "node_modules/almond/almond.js",
      include: [ "src/main.js" ],
      out: "dist/app.js",
      optimize: "none",
    },
  },
},

但现在我得到

{ [Error: Error: ENOENT: no such file or directory, open '/Users/gregg/temp/grunt-contrib-requirejs-example/src/node_modules/almond/almond.js'
    at Error (native)
]
  originalError: 
   { [Error: ENOENT: no such file or directory, open '/Users/gregg/temp/grunt-contrib-requirejs-example/src/node_modules/almond/almond.js']
     errno: -2,
     code: 'ENOENT',
     syscall: 'open',
     path: '/Users/gregg/temp/grunt-contrib-requirejs-example/src/node_modules/almond/almond.js',
     fileName: '/Users/gregg/temp/grunt-contrib-requirejs-example/src/node_modules/almond/almond.js' } }

所以我尝试修复杏仁路径

requirejs: {
  full: {
    options: {
      baseUrl: "./src",
      name: "../node_modules/almond/almond.js",
      include: "main",
      out: "dist/app.js",
      optimize: "none",
    },
  },
},

但这也失败了

{ [Error: Error: ERROR: module path does not exist: ../node_modules/almond/almond.js for module named: ../node_modules/almond/almond.js. Path is relative to: /Users/gregg/temp/grunt-contrib-requirejs-example
    at /Users/gregg/temp/grunt-contrib-requirejs-example/node_modules/requirejs/bin/r.js:30214:35
]
  originalError: [Error: ERROR: module path does not exist: ../node_modules/almond/almond.js for module named: ../node_modules/almond/almond.js. Path is relative to: /Users/gregg/temp/grunt-contrib-requirejs-example] }

我没有得到什么？

The entire thing is checked into github here 如果您想使用它。

Answer 1

这就是答案。

r.js 更喜欢模块名称而不是路径

requirejs: {
  full: {
    options: {
      baseUrl: "./src",
      paths: {
        almond: "../node_modules/almond/almond",
      }
      name: "almond",
      include: [ "main.js" ],
      out: "dist/app.js",
      optimize: "none",
    },
  },
},

了解 r.js、almond 和相对路径

Understanding r.js, almond, and relative paths

requirejs

almond

r.js