Fatal编程技术网
  • ecmascript-6/
  • Ecmascript 6 导入角度平移将导入空对象

Ecmascript 6 导入角度平移将导入空对象

ecmascript-6

Ecmascript 6 导入角度平移将导入空对象,ecmascript-6,systemjs,angular-translate,jspm,Ecmascript 6,Systemjs,Angular Translate,Jspm,我正在使用0.16.42，它使用，我已经尝试了和，这两个都在github端点上 但是，对于这两种情况，angular都会抛出相同的错误 参数模块不是函数 在ES6语法中使用它们时，如下所示： import AngularRoute from 'angular-route'; angular.module('app', [AngularRoute]); 我用它做运输工具。我从导入中返回的对象似乎是空的。以下是我的config.js文件的相关部分： System.config({ baseU

我正在使用0.16.42，它使用，我已经尝试了和，这两个都在github端点上

但是，对于这两种情况，angular都会抛出相同的错误

参数模块不是函数

在ES6语法中使用它们时，如下所示：

import AngularRoute from 'angular-route';

angular.module('app', [AngularRoute]);
我用它做运输工具。我从导入中返回的对象似乎是空的。以下是我的
config.js
文件的相关部分：

System.config({
  baseURL: "/",
  defaultJSExtensions: true,
  transpiler: "babel",
  babelOptions: {
    "optional": [
      "runtime",
      "optimisation.modules.system"
    ]
  },
  paths: {
    "github:*": "jspm_packages/github/*",
    "npm:*": "jspm_packages/npm/*"
  },
  map: {
    "angular-route": "github:angular/bower-angular-route@1.5.8",
    "angular-translate": "github:angular-translate/bower-angular-translate@2.11.1",
  }...
编辑：当我试图用npm端点安装
angular translate
时，我得到了错误
http://errors.angularjs.org/1.5.8/$injector/unpr？p0=e
在
angular.js中的下一行


返回新的ErrorConstructor（消息）

我想这是一个进步，但显然还是不能解决我的问题

编辑#2：我通过使用npm端点在@artem的帮助下使用Angle route，由于某些原因github端点无法工作，因此我使用了
jspm安装npm:Angle route
。需要进一步调查为什么github包不起作用，而npm包起作用

编辑#3：正如您在下面看到的，我已经覆盖了包配置，尽管这没有帮助


"npm:angular-translate@2.11.1": {
        "format": "global",
        "dependencies": {
          "angular": ">=1.2.26"
        },
        "shim": {
          "angular-translate": {
            "deps": "angular"
          }
        }
      }



下面是使用systemjs进行角度平移的一个不太简单、不完全独立的示例：


npm install jspm
./node_modules/.bin/jspm install github:angular-translate/angular-translate


继续按，接受所有默认值

创建文件
test.js


import AngularTranslate from 'angular-translate/angular-translate';

console.log(AngularTranslate);


创建文件
index.html


<!doctype html>
<html>
<head>
    <script src="jspm_packages/system.src.js"></script>

    <script src="config.js"></script>
    <script>
        System.import('./test.js');
    </script>

</head>
<body>
</body>
</html>


为什么那个文件不在那里？它应该是由jspm创建的，如果您从npm安装了
angular translate
，它应该包含


module.exports = require("npm:angular-translate@2.11.1/dist/angular-translate.js");


这只是从符号包名称（该.js文件的名称）重定向到该包主文件，如package.json中所指定：


"main": "dist/angular-translate.js",


但是角度转换来自github，那里没有
dist
。这就是jspm没有创建重定向文件的原因——没有任何东西可以重定向到

没问题，只需从我们从github获得的源代码构建它：


cd jspm_packages/github/angular-translate/angular-translate@2.11.1/
npm install
npm run-script build
cd ../../../..


并修复
config.js
中的映射：


  map: {
      "angular-translate/angular-translate": "github:angular-translate/angular-translate@2.11.1/dist/angular-translate",


再次在浏览器中打开
index.html
：


system.src.js:122 Uncaught (in promise) Error: (SystemJS) angular is not defined(…)


没问题，angular已经作为angular translate依赖项安装，只需告诉systemjs何时以及如何加载它

添加到config.js：


  meta: {
    "angular-translate/angular-translate": {
        "deps": ["angular"]
      }
  },


  map: {
    "angular": "github:angular-translate/angular-translate@2.11.1/node_modules/angular/angular",


注意：无需为角度平移指定
格式
。SystemJS自动检测正确-它可以作为
'amd'
或
'cjs'
加载，但不能作为
'global'
工作。另外，您可能并没有从安装angular translate开始，所以您已经在某个地方有了angular.js文件和映射

再次在浏览器中打开index.html。它在控制台中打印：


pascalprecht.translate


是，AngularTranslate导出字符串-似乎是angular1模块的典型示例

我没有使用angular.js的经验，所以我宣布这是一个成功的例子，到此为止

PS为什么从npm安装angular route时，angular route起作用，而从github安装时，angular route不起作用

从npm安装时，jspm创建了一个名为
jspm\u packages/npm/angular的文件-route@1.5.8.js
，包含


module.exports = require("npm:angular-route@1.5.8/index.js");


因为angular route的package.json


  "main": "index.js",



"main": "./angular-route.js",


这是正确的，对你有用

从github安装时，jspm创建了类似的文件
jspm\u-packages/github/angular/bower-angular-route@1.5.8.js
，但这次它指向另一个文件


module.exports = require("github:angular/bower-angular-route@1.5.8/angular-route");


因为有人在jspm注册表中的

因为bower angular route的bower.json


  "main": "index.js",



"main": "./angular-route.js",


也许这是一个疏忽，也许这是正确的，对他们有效-我不知道


TL；DR如果软件包管理器的软件包没有正确打包，那么使用软件包管理器安装软件不是一个好主意。
我最终通过npm端点（而不是默认的（github）端点）安装角度平移和角度路由，使用


jspm安装npm:angular route

&


jspm安装npm:angular translate-o'{依赖项：{angular:'>=1.2.26'}}'


由于jspm没有正确理解原始依赖语法，因此需要对angular translate进行重写，该语法是
angular:“>=1.2.26尝试将您的导入更改为：import*as AngularRoute from'angular-route'您好，该语法只是从'angular-route'导入所有内容，这给了我一个空对象，index.js也有
module.exports='ngRoute'module.exports=require（“./angular route”）
@artem很好，我还没有看过angular route的index.js，我会看看我是否能用它工作knowledge@artem我通过使用angular route npm端点而不是github来实现它，通过使用
jspm安装npm:angular route
，我将看看两者之间的区别，npm包还导出一个字符串“你不需要为angular translate.SystemJS自动指定格式-正确检测-它是'amd'，而不是'global'”。现在我很困惑，除了它读取的
angular translate.js
文件
“format cjs”
之外，我从源代码构建的那个文件没有该字符串。它从样板函数开始，该函数允许将其作为amd和cjs加载。我更新了答案。