jspm bundle 代码在作为 root 的子目录中

Question

我正在尝试创建一个 self-executing bundle 应用程序，但是 jspm 找不到它要找的东西。

我有以下文件夹结构

src 目录包含所有 JavaScript，但它由节点托管，就好像它是根目录一样。 jspm_packages 就像在根目录中一样托管，使普通模块 import 没有路径成为可能（即 import React from 'react'）

该应用程序运行得很好，但是当我尝试构建它时失败了，因为它不知道在 src 目录和中查找 jspm_packages 模块目录。有没有办法在不更改文件夹结构或根目录的情况下解决这个问题？

我同意将 system.config.js 文件移动到 src，如果可以的话）

编辑

如果将 jspm_packages 移动到 src，这很容易。

在package.json

"jspm": {
    "directories": {
      "baseURL": "src"
    },
    "configFile": "src/system.config.js"
 }

这会将 system.config.js 和 jspm_packages 都放在 src 中（不要在 system.config.js 中使用 baseUrl），并且捆绑会起作用。这里的主要缺点是 src 文件夹不再只包含项目代码；它现在还包含库代码。执行文件夹搜索变得更加困难，我只是更喜欢一个包含所有 my 代码的文件夹。

编辑2

在进一步思考这个问题之后，我想我真正想要的是一种在捆绑期间指定备用 path 配置的方法。根据我对文档的阅读，这似乎不受支持。

Answer 1

您可以将 baseUrl 设置为根目录（即“/”），然后为您的源代码设置 path路径属性像这样：

System.config({
    baseURL: "/",
    paths: {
        "*": "dist/*",
        "github:*": "jspm_packages/github/*",
        "npm:*": "jspm_packages/npm/*"
    }
})

可以看到完整的工作示例here。

此外，如果您需要更改路径 只是为了捆绑 您可以在 gulp 任务中使用 jspm-cli 并覆盖您的构建器配置，例如这个：

var jspm = require('jspm');

gulp.task('task', function () {
    var builder = new jspm.Builder();
    builder.loadConfigSync('pathToYourConfigFile');
    builder.config({
        paths: {
            '*': 'pathToYourCode'
        }
    });

    builder.bundle('yourOptionsHere');
}

jspm bundle 代码在作为 root 的子目录中

jspm bundle code in subdirectory that is served as root

jspm

编辑

编辑2