错误:使用StencilJS克隆Ionic 4组件时出现“找不到模块”

时间:2018-08-25 21:06:06

标签: angular typescript ionic-framework stenciljs

我需要用Ionic 4克隆一个StencilJS组件,然后...

我刚刚创建了存储库:

https://github.com/napolev/custom-range

基于存储库:

https://github.com/ionic-team/stencil-component-starter

然后复制了Ionic组件range

https://github.com/ionic-team/ionic/tree/master/core/src/components/range

收件人:

/src/components/custom-range

但是在VS Code上打开项目时,出现以下错误:

range.tsx src\components\custom-range
- Cannot find module '../../interface'.
- Cannot find module '../../utils/helpers'.
- Cannot find module '../../utils/theme'.
- Dynamic import is only supported when '--module' flag is 'commonjs' or 'esNext'.
- Cannot find module '../../utils/gesture/gesture'.

如下图所示:

enter image description here

关于如何将那些缺失的引用包含到我的项目中的任何想法?

谢谢!

[编辑1]

在回应@Ayoub k时,他说:

添加以下依赖项:

"@stencil/core": "^0.12.0-8",
"@stencil/dev-server": "latest",
"@stencil/sass": "0.1.0",
"@stencil/utils": "latest",

您可以在node_modules文件夹下的@stencil文件夹中找到资源。

这是我的答案:

/node_modules/@stencil目录中,我具有以下目录结构:

.
├── core
│   ├── CHANGELOG.md
│   ├── LICENSE
│   ├── bin
│   │   └── stencil
│   ├── compiler
│   │   ├── index.js
│   │   └── package.json
│   ├── dist
│   │   ├── cli
│   │   │   └── index.js
│   │   ├── client
│   │   │   ├── core.build.js
│   │   │   ├── core.esm.js
│   │   │   ├── declarations
│   │   │   │   └── stencil.core.d.ts
│   │   │   ├── loader.js
│   │   │   └── polyfills
│   │   │       ├── es5
│   │   │       │   ├── array.js
│   │   │       │   ├── dom.js
│   │   │       │   ├── fetch.js
│   │   │       │   ├── index.js
│   │   │       │   ├── object.js
│   │   │       │   ├── promise.js
│   │   │       │   ├── string.js
│   │   │       │   └── url.js
│   │   │       └── esm
│   │   │           ├── array.js
│   │   │           ├── dom.js
│   │   │           ├── fetch.js
│   │   │           ├── index.js
│   │   │           ├── object.js
│   │   │           ├── promise.js
│   │   │           ├── string.js
│   │   │           └── url.js
│   │   ├── compiler
│   │   │   ├── app
│   │   │   │   ├── app-core-browser.d.ts
│   │   │   │   ├── app-core-esm.d.ts
│   │   │   │   ├── app-es5-disabled.d.ts
│   │   │   │   ├── app-file-naming.d.ts
│   │   │   │   ├── app-global-scripts.d.ts
│   │   │   │   ├── app-loader.d.ts
│   │   │   │   ├── app-polyfills.d.ts
│   │   │   │   ├── app-registry.d.ts
│   │   │   │   ├── build-core-content.d.ts
│   │   │   │   ├── generate-app-files.d.ts
│   │   │   │   └── reserved-properties.d.ts
│   │   │   ├── asset-versioning
│   │   │   │   ├── asset-versioning.d.ts
│   │   │   │   ├── element-assets.d.ts
│   │   │   │   ├── manifest-assets.d.ts
│   │   │   │   └── util.d.ts
│   │   │   ├── build
│   │   │   │   ├── build-auxiliaries.d.ts
│   │   │   │   ├── build-ctx.d.ts
│   │   │   │   ├── build-finish.d.ts
│   │   │   │   ├── build-hmr.d.ts
│   │   │   │   ├── build-results.d.ts
│   │   │   │   ├── build-stats.d.ts
│   │   │   │   ├── build.d.ts
│   │   │   │   ├── cache-stats.d.ts
│   │   │   │   ├── compiler-ctx.d.ts
│   │   │   │   ├── empty-dir.d.ts
│   │   │   │   ├── replacer.d.ts
│   │   │   │   └── write-build.d.ts
│   │   │   ├── bundle
│   │   │   │   ├── bundle-modules.d.ts
│   │   │   │   ├── bundle.d.ts
│   │   │   │   ├── generate-bundles.d.ts
│   │   │   │   ├── rollup-bundle.d.ts
│   │   │   │   ├── rollup-plugins
│   │   │   │   │   ├── abort-plugin.d.ts
│   │   │   │   │   ├── in-memory-fs-read.d.ts
│   │   │   │   │   ├── json.d.ts
│   │   │   │   │   ├── local-resolution.d.ts
│   │   │   │   │   ├── node-env-vars.d.ts
│   │   │   │   │   ├── node-globals.d.ts
│   │   │   │   │   ├── paths-resolution.d.ts
│   │   │   │   │   └── rollup-plugin-replace.d.ts
│   │   │   │   └── write-bundles.d.ts
│   │   │   ├── cache.d.ts
│   │   │   ├── collections
│   │   │   │   ├── collection-compatibility.d.ts
│   │   │   │   ├── collection-data.d.ts
│   │   │   │   ├── collection-types.d.ts
│   │   │   │   ├── init-collections.d.ts
│   │   │   │   ├── parse-collection-module.d.ts
│   │   │   │   └── upgrade-collection.d.ts
│   │   │   ├── compiler.d.ts
│   │   │   ├── component-plugins
│   │   │   │   └── assets-plugin.d.ts
│   │   │   ├── config
│   │   │   │   ├── _deprecated-validate-config-collection.d.ts
│   │   │   │   ├── _deprecated-validate-multiple-targets.d.ts
│   │   │   │   ├── config-reload.d.ts
│   │   │   │   ├── config-utils.d.ts
│   │   │   │   ├── load-config.d.ts
│   │   │   │   ├── validate-asset-versioning.d.ts
│   │   │   │   ├── validate-component.d.ts
│   │   │   │   ├── validate-config.d.ts
│   │   │   │   ├── validate-copy.d.ts
│   │   │   │   ├── validate-dev-server.d.ts
│   │   │   │   ├── validate-docs.d.ts
│   │   │   │   ├── validate-namespace.d.ts
│   │   │   │   ├── validate-outputs-angular.d.ts
│   │   │   │   ├── validate-outputs-dist.d.ts
│   │   │   │   ├── validate-outputs-www.d.ts
│   │   │   │   ├── validate-outputs.d.ts
│   │   │   │   ├── validate-paths.d.ts
│   │   │   │   ├── validate-plugins.d.ts
│   │   │   │   ├── validate-prerender.d.ts
│   │   │   │   ├── validate-resources-url.d.ts
│   │   │   │   ├── validate-rollup-config.d.ts
│   │   │   │   ├── validate-service-worker.d.ts
│   │   │   │   ├── validate-stats.d.ts
│   │   │   │   └── validate-workers.d.ts
│   │   │   ├── copy
│   │   │   │   ├── assets-copy-tasks.d.ts
│   │   │   │   ├── config-copy-tasks.d.ts
│   │   │   │   ├── copy-styles.d.ts
│   │   │   │   └── copy-tasks-main.d.ts
│   │   │   ├── distribution
│   │   │   │   ├── dist-angular.d.ts
│   │   │   │   ├── dist-cjs.d.ts
│   │   │   │   ├── dist-esm.d.ts
│   │   │   │   ├── distribution.d.ts
│   │   │   │   ├── stencil-types.d.ts
│   │   │   │   └── validate-package-json.d.ts
│   │   │   ├── docs
│   │   │   │   ├── auto-docs.d.ts
│   │   │   │   ├── constants.d.ts
│   │   │   │   ├── docs-util.d.ts
│   │   │   │   ├── docs.d.ts
│   │   │   │   ├── generate-json-doc.d.ts
│   │   │   │   ├── generate-readmes.d.ts
│   │   │   │   ├── markdown-css-props.d.ts
│   │   │   │   ├── markdown-events.d.ts
│   │   │   │   ├── markdown-methods.d.ts
│   │   │   │   ├── markdown-props.d.ts
│   │   │   │   └── style-docs.d.ts
│   │   │   ├── entries
│   │   │   │   ├── app-graph.d.ts
│   │   │   │   ├── component-dependencies.d.ts
│   │   │   │   ├── component-references.d.ts
│   │   │   │   ├── entry-components.d.ts
│   │   │   │   └── entry-modules.d.ts
│   │   │   ├── events.d.ts
│   │   │   ├── fs-watch
│   │   │   │   ├── fs-watch-init.d.ts
│   │   │   │   ├── fs-watch-log.d.ts
│   │   │   │   ├── fs-watch-normalizer.d.ts
│   │   │   │   └── fs-watch-rebuild.d.ts
│   │   │   ├── html
│   │   │   │   ├── canonical-link.d.ts
│   │   │   │   ├── collapse-html-whitespace.d.ts
│   │   │   │   ├── generate-index-html.d.ts
│   │   │   │   ├── init-index-html.d.ts
│   │   │   │   ├── inline-external-assets.d.ts
│   │   │   │   ├── inline-loader-script.d.ts
│   │   │   │   ├── minify-inline-content.d.ts
│   │   │   │   ├── optimize-html.d.ts
│   │   │   │   └── used-selectors.d.ts
│   │   │   ├── index.d.ts
│   │   │   ├── index.js
│   │   │   ├── minifier.d.ts
│   │   │   ├── plugin
│   │   │   │   └── plugin.d.ts
│   │   │   ├── prerender
│   │   │   │   ├── host-config.d.ts
│   │   │   │   ├── prerender-app.d.ts
│   │   │   │   ├── prerender-path.d.ts
│   │   │   │   └── prerender-utils.d.ts
│   │   │   ├── service-worker
│   │   │   │   ├── generate-sw.d.ts
│   │   │   │   ├── inject-sw-script.d.ts
│   │   │   │   └── service-worker-util.d.ts
│   │   │   ├── style
│   │   │   │   ├── auto-prefix-css-main.d.ts
│   │   │   │   ├── cached-styles.d.ts
│   │   │   │   ├── component-styles.d.ts
│   │   │   │   ├── css-imports.d.ts
│   │   │   │   ├── generate-styles.d.ts
│   │   │   │   ├── get-selectors.d.ts
│   │   │   │   ├── global-styles.d.ts
│   │   │   │   ├── minify-style.d.ts
│   │   │   │   ├── normalize-styles.d.ts
│   │   │   │   ├── optimize-ssr-styles.d.ts
│   │   │   │   ├── parse-css.d.ts
│   │   │   │   ├── remove-unused-styles.d.ts
│   │   │   │   ├── scope-css.d.ts
│   │   │   │   └── stringify-css.d.ts
│   │   │   ├── transpile
│   │   │   │   ├── compiler-options.d.ts
│   │   │   │   ├── core-es5-build.d.ts
│   │   │   │   ├── create-component-types.d.ts
│   │   │   │   ├── datacollection
│   │   │   │   │   ├── component-decorator.d.ts
│   │   │   │   │   ├── discover-collections.d.ts
│   │   │   │   │   ├── element-decorator.d.ts
│   │   │   │   │   ├── event-decorator.d.ts
│   │   │   │   │   ├── gather-metadata.d.ts
│   │   │   │   │   ├── listen-decorator.d.ts
│   │   │   │   │   ├── method-decorator.d.ts
│   │   │   │   │   ├── prop-decorator.d.ts
│   │   │   │   │   ├── reserved-public-members.d.ts
│   │   │   │   │   ├── state-decorator.d.ts
│   │   │   │   │   ├── styles-meta.d.ts
│   │   │   │   │   ├── utils.d.ts
│   │   │   │   │   ├── validate-component.d.ts
│   │   │   │   │   └── watch-decorator.d.ts
│   │   │   │   ├── transformers
│   │   │   │   │   ├── JSX_Upgrade_From_0_0_5
│   │   │   │   │   │   └── upgrade-jsx-props.d.ts
│   │   │   │   │   ├── Metadata_Upgrade_From_0_1_0
│   │   │   │   │   │   └── metadata-upgrade.d.ts
│   │   │   │   │   ├── add-component-metadata.d.ts
│   │   │   │   │   ├── component-dependencies.d.ts
│   │   │   │   │   ├── module-imports.d.ts
│   │   │   │   │   ├── remove-collection-imports.d.ts
│   │   │   │   │   ├── remove-decorators.d.ts
│   │   │   │   │   ├── remove-stencil-imports.d.ts
│   │   │   │   │   └── util.d.ts
│   │   │   │   ├── transpile-app.d.ts
│   │   │   │   ├── transpile-service.d.ts
│   │   │   │   ├── transpile-to-es5-main.d.ts
│   │   │   │   └── validate-types-main.d.ts
│   │   │   └── util.d.ts
│   │   ├── declarations
│   │   │   ├── app-global.d.ts
│   │   │   ├── build-conditionals.d.ts
│   │   │   ├── build-events.d.ts
│   │   │   ├── build.d.ts
│   │   │   ├── cache.d.ts
│   │   │   ├── collection.d.ts
│   │   │   ├── compiler.d.ts
│   │   │   ├── component-interfaces.d.ts
│   │   │   ├── component.d.ts
│   │   │   ├── config.d.ts
│   │   │   ├── copy.d.ts
│   │   │   ├── decorators.d.ts
│   │   │   ├── dev-inspector.d.ts
│   │   │   ├── dev-server.d.ts
│   │   │   ├── diagnostics.d.ts
│   │   │   ├── docs.d.ts
│   │   │   ├── dom.d.ts
│   │   │   ├── entry.d.ts
│   │   │   ├── events.d.ts
│   │   │   ├── file-system.d.ts
│   │   │   ├── fs-watch.d.ts
│   │   │   ├── in-memory-fs.d.ts
│   │   │   ├── index.d.ts
│   │   │   ├── jsx.d.ts
│   │   │   ├── logger.d.ts
│   │   │   ├── minify-js.d.ts
│   │   │   ├── output-targets.d.ts
│   │   │   ├── platform.d.ts
│   │   │   ├── plugin.d.ts
│   │   │   ├── render.d.ts
│   │   │   ├── server.d.ts
│   │   │   ├── style.d.ts
│   │   │   ├── system.d.ts
│   │   │   ├── transpile.d.ts
│   │   │   ├── vdom.d.ts
│   │   │   └── worker.d.ts
│   │   ├── dev-server
│   │   │   ├── content-type-db.json
│   │   │   ├── index.js
│   │   │   ├── static
│   │   │   │   ├── app-error.css
│   │   │   │   ├── dev-server-client.html
│   │   │   │   └── favicon.ico
│   │   │   └── templates
│   │   │       ├── directory-index.html
│   │   │       └── initial-load.html
│   │   ├── index.d.ts
│   │   ├── index.js
│   │   ├── renderer
│   │   │   └── vdom
│   │   │       ├── h.d.ts
│   │   │       ├── index.d.ts
│   │   │       └── index.js
│   │   ├── server
│   │   │   ├── connect-element.d.ts
│   │   │   ├── dom-api-server.d.ts
│   │   │   ├── hydrate-html.d.ts
│   │   │   ├── hydrate-utils.d.ts
│   │   │   ├── index.d.ts
│   │   │   ├── index.js
│   │   │   ├── load-config.d.ts
│   │   │   ├── load-registry.d.ts
│   │   │   ├── middleware
│   │   │   │   └── express-middleware.d.ts
│   │   │   ├── platform-server.d.ts
│   │   │   ├── queue-server.d.ts
│   │   │   ├── renderer.d.ts
│   │   │   └── server-styles.d.ts
│   │   ├── sys
│   │   │   └── node
│   │   │       ├── LICENSES
│   │   │       │   ├── autoprefixer.md
│   │   │       │   ├── clean-css.md
│   │   │       │   ├── glob.md
│   │   │       │   ├── is-glob.md
│   │   │       │   ├── minimatch.md
│   │   │       │   ├── node-fetch.md
│   │   │       │   ├── opn.md
│   │   │       │   ├── postcss.md
│   │   │       │   ├── semver.md
│   │   │       │   ├── terser.md
│   │   │       │   ├── turbocolor.md
│   │   │       │   └── ws.md
│   │   │       ├── index.js
│   │   │       ├── node-fetch.js
│   │   │       ├── open-in-editor.js
│   │   │       ├── sys-util.js
│   │   │       ├── sys-worker.js
│   │   │       ├── visualstudio.vbs
│   │   │       ├── websocket.js
│   │   │       └── xdg-open
│   │   ├── testing
│   │   │   ├── expect.d.ts
│   │   │   ├── index.d.ts
│   │   │   ├── index.js
│   │   │   ├── mock-doc
│   │   │   │   ├── attribute.d.ts
│   │   │   │   ├── class-list.d.ts
│   │   │   │   ├── comment-node.d.ts
│   │   │   │   ├── constants.d.ts
│   │   │   │   ├── css-style-declaration.d.ts
│   │   │   │   ├── custom-element-registry.d.ts
│   │   │   │   ├── document-fragment.d.ts
│   │   │   │   ├── document-type-node.d.ts
│   │   │   │   ├── document.d.ts
│   │   │   │   ├── element.d.ts
│   │   │   │   ├── event.d.ts
│   │   │   │   ├── history.d.ts
│   │   │   │   ├── location.d.ts
│   │   │   │   ├── navigator.d.ts
│   │   │   │   ├── node.d.ts
│   │   │   │   ├── parse-html.d.ts
│   │   │   │   ├── performance.d.ts
│   │   │   │   ├── selector.d.ts
│   │   │   │   ├── serialize-node.d.ts
│   │   │   │   ├── storage.d.ts
│   │   │   │   ├── text-node.d.ts
│   │   │   │   └── window.d.ts
│   │   │   ├── mocks.d.ts
│   │   │   ├── parse-html.d.ts
│   │   │   ├── public-utils.d.ts
│   │   │   ├── test-transpile.d.ts
│   │   │   ├── test-window-logger.d.ts
│   │   │   ├── test-window.d.ts
│   │   │   ├── testing-config.d.ts
│   │   │   ├── testing-fs.d.ts
│   │   │   ├── testing-logger.d.ts
│   │   │   ├── testing-sys.d.ts
│   │   │   └── utils.d.ts
│   │   ├── transpiled-build-conditionals
│   │   │   ├── build-conditionals
│   │   │   │   ├── index.d.ts
│   │   │   │   └── index.js
│   │   │   ├── compiler
│   │   │   │   ├── bundle
│   │   │   │   │   └── rollup-plugins
│   │   │   │   │       ├── rollup-plugin-replace.d.ts
│   │   │   │   │       └── rollup-plugin-replace.js
│   │   │   │   ├── util.d.ts
│   │   │   │   └── util.js
│   │   │   ├── declarations
│   │   │   │   ├── app-global.d.ts
│   │   │   │   ├── app-global.js
│   │   │   │   ├── build-conditionals.d.ts
│   │   │   │   ├── build-conditionals.js
│   │   │   │   ├── build-events.d.ts
│   │   │   │   ├── build-events.js
│   │   │   │   ├── build.d.ts
│   │   │   │   ├── build.js
│   │   │   │   ├── cache.d.ts
│   │   │   │   ├── cache.js
│   │   │   │   ├── collection.d.ts
│   │   │   │   ├── collection.js
│   │   │   │   ├── compiler.d.ts
│   │   │   │   ├── compiler.js
│   │   │   │   ├── component-interfaces.d.ts
│   │   │   │   ├── component-interfaces.js
│   │   │   │   ├── component.d.ts
│   │   │   │   ├── component.js
│   │   │   │   ├── config.d.ts
│   │   │   │   ├── config.js
│   │   │   │   ├── copy.d.ts
│   │   │   │   ├── copy.js
│   │   │   │   ├── decorators.d.ts
│   │   │   │   ├── decorators.js
│   │   │   │   ├── dev-inspector.d.ts
│   │   │   │   ├── dev-inspector.js
│   │   │   │   ├── dev-server.d.ts
│   │   │   │   ├── dev-server.js
│   │   │   │   ├── diagnostics.d.ts
│   │   │   │   ├── diagnostics.js
│   │   │   │   ├── docs.d.ts
│   │   │   │   ├── docs.js
│   │   │   │   ├── dom.d.ts
│   │   │   │   ├── dom.js
│   │   │   │   ├── entry.d.ts
│   │   │   │   ├── entry.js
│   │   │   │   ├── events.d.ts
│   │   │   │   ├── events.js
│   │   │   │   ├── file-system.d.ts
│   │   │   │   ├── file-system.js
│   │   │   │   ├── fs-watch.d.ts
│   │   │   │   ├── fs-watch.js
│   │   │   │   ├── in-memory-fs.d.ts
│   │   │   │   ├── in-memory-fs.js
│   │   │   │   ├── index.d.ts
│   │   │   │   ├── index.js
│   │   │   │   ├── jsx.d.ts
│   │   │   │   ├── jsx.js
│   │   │   │   ├── logger.d.ts
│   │   │   │   ├── logger.js
│   │   │   │   ├── minify-js.d.ts
│   │   │   │   ├── minify-js.js
│   │   │   │   ├── output-targets.d.ts
│   │   │   │   ├── output-targets.js
│   │   │   │   ├── platform.d.ts
│   │   │   │   ├── platform.js
│   │   │   │   ├── plugin.d.ts
│   │   │   │   ├── plugin.js
│   │   │   │   ├── render.d.ts
│   │   │   │   ├── render.js
│   │   │   │   ├── server.d.ts
│   │   │   │   ├── server.js
│   │   │   │   ├── style.d.ts
│   │   │   │   ├── style.js
│   │   │   │   ├── system.d.ts
│   │   │   │   ├── system.js
│   │   │   │   ├── transpile.d.ts
│   │   │   │   ├── transpile.js
│   │   │   │   ├── vdom.d.ts
│   │   │   │   ├── vdom.js
│   │   │   │   ├── worker.d.ts
│   │   │   │   └── worker.js
│   │   │   └── util
│   │   │       ├── build-conditionals.d.ts
│   │   │       ├── build-conditionals.js
│   │   │       ├── constants.d.ts
│   │   │       └── constants.js
│   │   └── util
│   │       ├── cmp-meta.d.ts
│   │       ├── constants.d.ts
│   │       ├── data-parse.d.ts
│   │       ├── data-serialize.d.ts
│   │       ├── helpers.d.ts
│   │       ├── in-memory-fs.d.ts
│   │       └── scope.d.ts
│   ├── package.json
│   ├── readme.md
│   ├── server
│   │   ├── index.js
│   │   └── package.json
│   ├── sys
│   │   └── node
│   │       ├── index.js
│   │       └── package.json
│   └── testing
│       ├── index.js
│       ├── jest.preprocessor.js
│       └── package.json
├── dev-server
│   ├── LICENSE
│   ├── README.md
│   ├── assets
│   │   ├── 404.html
│   │   ├── __stencil-dev-server__
│   │   │   └── favicon.ico
│   │   └── index.html
│   ├── bin
│   │   └── stencil-dev-server
│   ├── dist
│   │   ├── definitions.js
│   │   ├── index.js
│   │   ├── middlewares.js
│   │   ├── promisify.js
│   │   └── utils.js
│   ├── node_modules
│   │   ├── anymatch
│   │   │   ├── LICENSE
│   │   │   ├── README.md
│   │   │   ├── index.js
│   │   │   └── package.json
│   │   ├── arr-diff
│   │   │   ├── LICENSE
│   │   │   ├── README.md
│   │   │   ├── index.js
│   │   │   └── package.json
│   │   ├── array-unique
│   │   │   ├── LICENSE
│   │   │   ├── README.md
│   │   │   ├── index.js
│   │   │   └── package.json
│   │   ├── braces
│   │   │   ├── LICENSE
│   │   │   ├── README.md
│   │   │   ├── index.js
│   │   │   └── package.json
│   │   ├── chokidar
│   │   │   ├── CHANGELOG.md
│   │   │   ├── README.md
│   │   │   ├── index.js
│   │   │   ├── lib
│   │   │   │   ├── fsevents-handler.js
│   │   │   │   └── nodefs-handler.js
│   │   │   └── package.json
│   │   ├── expand-brackets
│   │   │   ├── LICENSE
│   │   │   ├── README.md
│   │   │   ├── index.js
│   │   │   └── package.json
│   │   ├── extglob
│   │   │   ├── LICENSE
│   │   │   ├── README.md
│   │   │   ├── index.js
│   │   │   └── package.json
│   │   ├── glob-parent
│   │   │   ├── LICENSE
│   │   │   ├── README.md
│   │   │   ├── index.js
│   │   │   ├── package.json
│   │   │   └── test.js
│   │   ├── is-extglob
│   │   │   ├── LICENSE
│   │   │   ├── README.md
│   │   │   ├── index.js
│   │   │   └── package.json
│   │   ├── is-glob
│   │   │   ├── LICENSE
│   │   │   ├── README.md
│   │   │   ├── index.js
│   │   │   └── package.json
│   │   ├── kind-of
│   │   │   ├── LICENSE
│   │   │   ├── README.md
│   │   │   ├── index.js
│   │   │   └── package.json
│   │   └── micromatch
│   │       ├── LICENSE
│   │       ├── README.md
│   │       ├── index.js
│   │       ├── lib
│   │       │   ├── chars.js
│   │       │   ├── expand.js
│   │       │   ├── glob.js
│   │       │   └── utils.js
│   │       └── package.json
│   └── package.json
├── sass
│   ├── LICENSE
│   ├── dist
│   │   ├── declarations.d.ts
│   │   ├── declarations.js
│   │   ├── diagnostics.d.ts
│   │   ├── diagnostics.js
│   │   ├── index.cjs.js
│   │   ├── index.d.ts
│   │   ├── index.js
│   │   ├── util.d.ts
│   │   └── util.js
│   ├── package.json
│   └── readme.md
└── utils
    ├── LICENSE
    ├── README.md
    ├── bin
    │   └── sd
    ├── dist
    │   ├── concurrent.js
    │   ├── index.js
    │   ├── utils
    │   │   └── promisify.js
    │   └── vendor
    │       ├── copyDir.d.ts
    │       ├── copyDir.js
    │       ├── mkdirp.d.ts
    │       ├── mkdirp.js
    │       ├── rimraf.d.ts
    │       ├── rimraf.js
    │       ├── tree-kill.d.ts
    │       └── tree-kill.js
    ├── package.json
    ├── src
    │   ├── concurrent.ts
    │   ├── index.ts
    │   ├── utils
    │   │   └── promisify.ts
    │   └── vendor
    │       ├── copyDir.d.ts
    │       ├── copyDir.js
    │       ├── mkdirp.d.ts
    │       ├── mkdirp.js
    │       ├── rimraf.d.ts
    │       ├── rimraf.js
    │       ├── tree-kill.d.ts
    │       └── tree-kill.js
    └── tsconfig.json

89 directories, 516 files

找不到的地方,例如:

- interface.ts [OR] interface.d.ts
- utils/helpers.ts [OR] utils/helpers.d.ts
- utils/theme.ts [OR] utils/theme.d.ts
- utils/gesture/gesture.ts [OR] utils/gesture/gesture.d.ts

2 个答案:

答案 0 :(得分:2)

相对导入是指与https://github.com/ionic-team/ionic/tree/master/core/src/components/range相关的其他模块。例如,../../interfacehttps://github.com/ionic-team/ionic/blob/master/core/src/interface.d.ts。您可能不想手动将这些文件复制到您的项目中。最好添加对@ionic/core的依赖关系(程序包名称来自https://github.com/ionic-team/ionic/blob/master/core/package.json)并更新导入路径以引用正确的模块。

安装@ionic/core后,我在node_modules/@ionic/core目录中查找,看起来您想要的各个模块在node_modules/@ionic/core/dist/collection下。但是,我注意到您的某些导入是由主@ionic/core模块重新导出的,因此您可以改用它来节省您的麻烦。因此,您的导入应如下所示:

import { Color, Gesture, GestureDetail, InputChangeEvent, Mode, RangeValue, StyleEvent } from '@ionic/core';
import { clamp, debounceEvent, deferEvent } from '@ionic/core';
import { createColorClasses, hostContext } from '@ionic/core/dist/collection/utils/theme';

及以下:

import('@ionic/core/dist/collection/utils/gesture/gesture')

各个模块的类型在node_modules/@ionic/core/dist/types下,因此要将这些类型与实际模块相关联,请在src/components/custom-range(我称为ionic-module-aliases.d.ts)中创建一个新文件,其中包含以下内容:内容:

declare module '@ionic/core/dist/collection/utils/theme' {
    export * from '@ionic/core/dist/types/utils/theme';
}

declare module '@ionic/core/dist/collection/utils/gesture/gesture' {
    export * from '@ionic/core/dist/types/utils/gesture/gesture';
}

最后,您需要根据错误消息将module中的tsconfig.json编译器选项更改为commonjsesnext;我会先尝试esnext

以上所述使我在range.tsx中的TypeScript错误为零,但是它是否在运行时正确加载取决于您使用的构建系统。我不熟悉Stencil构建系统,但是如果它产生错误并发布错误,我可能有个主意。

答案 1 :(得分:0)

是的,您缺少文件夹和文件:
从此处下载它们:https://github.com/ionic-team/ionic/tree/master/core/src

修改:

或添加以下依赖项:

"@stencil/core": "^0.12.0-8",
"@stencil/dev-server": "latest",
"@stencil/sass": "0.1.0",
"@stencil/utils": "latest",