Javascript 尝试运行 AMIjs 示例在本地它不起作用

Question

您好，感谢您阅读本文。

我想在本地 WebStorm 中加载示例 IDE。特别是我正在尝试加载加载器示例： https://github.com/FNNDSC/ami/tree/dev/examples/viewers_upload

我遇到的问题是默认导入看起来没有正确设置：

所以如果我尝试运行 npm install

我收到这个错误：

Can not install Node.js module: "C:\Program Files\nodejs\node.exe" "C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js" install base/core/core.utils

Standard error:
npm ERR! code ENOLOCAL
npm ERR! Could not install from "base\core\core.utils" as it does not contain a package.json file.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\YonePC\AppData\Roaming\npm-cache\_logs18-01-16T18_50_29_864Z-debug.log

我认为它与我的 package.json 有关，但看起来它已经设置了所有依赖项：

{
    "name": "ami.js",
    "version": "0.0.23-dev",
    "main": "build/ami.js",
    "keywords": [
        "ami",
        "ami.js",
        "three.js",
        "webgl",
        "dicom",
        "nifti",
        "awesome",
        "medical",
        "imaging",
        "xtk",
        "nrrd",
        "vtk",
        "stl",
        "trk"
    ],
    "author": {
        "name": "Nicolas Rannou",
        "email": "nicolas@eunate.ch",
        "url": "https://eunate.ch"
    },
    "license": "Apache-2.0",
    "repository": {
        "type": "git",
        "url": "https://fnndsc.github.io/ami"
    },
    "config": {
        "threeVersion": "87",
        "amiCDN": "https://cdnjs.cloudflare.com/ajax/libs/ami.js",
        "gaKey": "UA-39303022-3",
        "babel": "--module-bind js=babel-loader --colors --display-error-details"
    },
    "dependencies": {
        "dicom-parser": "1.7.3",
        "image-JPEG2000": "OHIF/image-JPEG2000#master",
        "jpeg-lossless-decoder-js": "1.2.3",
        "math-float32-to-binary-string": "^1.0.0",
        "nifti-reader-js": "v0.5.3",
        "nrrd-js": "^0.2.1",
        "pako": "1.0.1",
        "three": "0.87.0"
    },
    "scripts": {
        "build:ami": "webpack --config webpack.config.build.js",
        "build:ami:prod": "cross-env NODE_ENV=production yarn build:ami",
        "build:clean": "rimraf -rf build/*",
        "build:clean:hot": "rimraf -rf build/*.hot-update.*",
        "dev:ami": "webpack --config webpack.config.build.js --hot --watch --colors",
        "dist:ami": "yarn build:clean && yarn build:ami && yarn build:ami:prod && yarn doc",
        "dist:examples": "node ./scripts/buildDist.js && node ./scripts/router.js examples deploy",
        "dist:clean": "rimraf -rf dist/*",
        "analyze:ami": "cross-env NODE_WEBPACK_ANALYZE=true yarn build:ami",
        "analyze:ami:prod": "cross-env NODE_WEBPACK_ANALYZE=true yarn build:ami:prod",
        "clean": "yarn build:clean && yarn dist:clean",
        "example": "node ./scripts/router.js examples",
        "lesson": "node ./scripts/router.js lessons",
        "gen:index:examples": "node ./scripts/genIndexFiles.js examples",
        "gen:index:examples:ga": "cross-env NODE_GA=true node ./scripts/genIndexFiles.js examples",
        "gen:index:lessons": "node ./scripts/genIndexFiles.js lessons",
        "gen:index:lessons:cdn": "node ./scripts/genIndexFiles.js lessons cdn",
        "test": "karma start",
        "lint": "eslint src/**/*.js",
        "doc": "jsdoc -p -r -R README.md -c jsdoc.json -d dist/doc src",
        "ami": "yarn lint && yarn dist:ami && yarn test",
        "deploy": "yarn dist:clean && yarn build:clean && yarn dist:ami && yarn dist:examples && gh-pages -d dist"
    },
    "devDependencies": {
        "babel-cli": "latest",
        "babel-core": "^6.26.0",
        "babel-loader": "^7.1.2",
        "babel-preset-env": "^1.6.0",
        "babel-runtime": "^6.26.0",
        "compression-webpack-plugin": "^1.0.1",
        "cross-env": "^3.2.3",
        "eslint": "latest",
        "eslint-config-google": "latest",
        "gh-pages": "latest",
        "glslify": "5.1.0",
        "jasmine-core": "latest",
        "jsdoc": "jsdoc3/jsdoc#master",
        "karma": "latest",
        "karma-chrome-launcher": "^2.2.0",
        "karma-jasmine": "latest",
        "karma-sinon": "^1.0.5",
        "karma-spec-reporter": "latest",
        "karma-webpack": "^2.0.4",
        "live-server": "^1.1.0",
        "puppeteer": "^0.13.0",
        "rimraf": "^2.6.1",
        "rollup-plugin-node-builtins": "^2.1.2",
        "shelljs": "latest",
        "sinon": "^2.0.0",
        "uglifyjs-webpack-plugin": "^1.0.0-beta.3",
        "webpack": "^3.7.1",
        "webpack-bundle-analyzer": "^2.9.0",
        "webpack-dev-server": "^2.9.1",
        "webpack-watch-livereload-plugin": "^0.0.1"
    },
    "engines": {
        "node": ">=6.9.0"
    }
}

此外，我查看并尝试查找是否安装了 Node 模块，但由于它没有出现在 package.json 中，因此默认情况下未安装它们：

但是我确实安装了节点：

Microsoft Windows [Versión 6.3.9600]
(c) 2013 Microsoft Corporation. Todos los derechos reservados.

C:\Users\YonePC\WebstormProjects\ATLAS>node -v
v8.9.0

如果我执行 index.html 它会在开发者控制台上显示：

'Uncaught SyntaxError: Unexpected identifier'

说的是：

import CoreUtils from 'base/core/core.utils';

如果我尝试在 IDE 的帮助下重做导入，结果如下：

执行更新后index.html：

viewers_upload.js:5 Uncaught SyntaxError: Unexpected identifier

引用的行是：

import HelpersLut from "../../src/helpers/helpers.lut";

如果我尝试使用 web CDN 库版本：

我需要删除所有导入并使用网络库版本的 classes，如下所示：

我可以执行 index.html 并触发加载程序：

但是我不能无限地这样做，因为 class 到 parseUrl 是在磁盘库而不是网络库中：

控制台显示：

'Uncaught ReferenceError: CoreUtils is not defined
    at HTMLInputElement.readMultipleFiles (viewers_upload.js:429)
readMultipleFiles @ viewers_upload.js:429'

你能帮帮我吗？

感谢您花时间阅读本文。

编辑：我仍在尝试让该示例在本地运行。到目前为止，我已经能够包含 AMI 库的文件链接，例如：

viewers_upload.js

let dataUrl = CoreUtils.parseUrl(evt.target.files[i].name);

而不是 IDE 生成的正常导入：

import CoreUtils from "../../src/core/core.utils";

使用直接加载：

index.html

<script src="../../src/core/core.utils.js"></script>

但是我不能无限地这样做，因为 core.utils.js 使用导入所以浏览器报告错误：

Uncaught SyntaxError: Unexpected identifier

行内：

import Validators from './core.validators';

你能帮帮我吗？？？

Answer 1

要运行一个例子你应该：

启动开发服务器：yarn example <example name>（在你的情况下 yarn example viewers_upload）
在网络浏览器中转到 localhost:8081

Javascript 尝试 运行 AMIjs 示例在本地它不起作用

Javascript Trying to run AMIjs examples in local it does not work

ami.js

Javascript 尝试运行 AMIjs 示例在本地它不起作用