如何在 dart 代码中使用 npm 包？

问题描述 投票：0回答：5

我有一个运行在 Dart 编程语言上的 flutter 应用程序。我已经发布了一个 npm 包，我想在我的 flutter 应用程序中使用它。有什么办法可以使用 dart 中现有的 npm 包或者以某种方式自动将 npm 包转换为 dart 包？

npm dart flutter
5个回答
3
投票

这实际上取决于您的目的，

您正在编译 Web 版 Flutter 应用程序吗？

Dart 的 JS 库可能就是您正在寻找的...

你要为Android编译吗？

然后是Android JS、Flutter_liquidcore、Interactive_WebView。

这实际上取决于您期望应用程序编译成什么。

但不要指望本机应用程序体验......

2
投票

Dart 和 Javascript 是不同的编程语言。虽然可以将 lib 从 js 转译为 dart，但这并不容易做到，也不易维护，而且很可能不可推广。

除非您熟悉这两种语言及其限制，否则您不应该尝试将 NPM 包转换为某些 Dart 代码，除非您没有任何其他选择。

我建议你用 Dart 重写 NPM 包。

备注：这个答案是基于这样的假设：你不想在 webview 中集成 JS 代码，而是实际使用 Dart VM 中的代码。

1
投票

我们将一个相当大的 js 库转换为 dart（手动），这非常简单，因为这两种语言非常相似。

0
投票

Tl:Dr：使用 WebView 或运行 Node/Deno/SpiderNode 子进程。

让我回答你的问题标题；您必须将其包装在 webview 或 node.js 子进程中，以便可以使用 DBUS 之类的东西通过 IPC 进行通信。这是截至 2021 年的尖端硬实验技术。

  • 如果它是一个小的我们要测试的包，你可以 babel 将其转译为 Dart 并自动运行测试。
  • 如果是像Nuxt这样的大包，那就算了，或者放到WebView里。

如果是您自己的包，请考虑将其翻译为 Dart，然后转译为 JavaScript。从 Dart 转到可读的 Node/ES2021 非常简单。

但是你真的想用 Dart 来做所有事情吗？ 5 到 80 年后，Dart 社区会像 Trois、Vue、WebXR typescript 社区一样强大吗？

我的建议是使用 Dart 来发挥其优势，即客户端 JavaScript。并使用经过良好测试的包，可以从 TypeScript 转换为 Dart 或 Webview。

你可以使用glue子进程来运行node/deno/spidernode吗？请参阅 Termux F-Droid 崩溃，如果您想在最新版本的 Termux 上运行 Node 服务器，则不能使用 Google Play Store，只能使用 F-Droid。基本上，JIT 会让你的 App Store 审批流程变慢，但他们只能从政策角度禁止它，而不能从技术角度禁止它。您不应使用 npm install，而应将已安装的模块与已发布的应用程序版本捆绑在一起。

JIT 的弃用在 PWA 和 Spectre 这样的 Fuku 原生世界中有何影响？从安全角度来看，部署到 Kotlin/Swift 是一种狭隘的外包编译器补丁责任的方式，你应该每月至少构建一个，否则就离开公司。从隐私角度来看，握手和紧急隐私保护对 PWA 的影响将与对二进制应用程序的影响一样大。

0
投票

（复杂）Flutter 示例：https://github.com/flutter/packages/tree/main/packages/google_maps_flutter/google_maps_flutter_web

注意：如果开发特定于 Web 的包，则 

assets
必须包含在 
lib
文件夹中，请参阅： https://docs.flutter.dev/ui/assets/assets-and-images#bundling-of-package-assets

如果您在应用程序中，请删除 

[lib/]
；如果您正在开发 Flutter 包，请添加 
lib/
：

mkdir -p [lib/]assets/js && cd [lib/]assets/js
echo "node_modules/" > .gitignore
npm i my-node-package
npm i --save-exact --save-dev esbuild
touch deps.jsx

导入您的包并将其全局添加到您的

deps.jsx
:

import {default as my_package} from '@my-company/my-package';

window.my_company = {};
window.my_company.my_package = my_package;

构建你的包：

./node_modules/.bin/esbuild deps.jsx --bundle --sourcemap --outfile=deps.bundle.js

添加到您应用程序的 

pubspec.yaml
！ （不是包装）

flutter:
  assets:
    - [packages/my-flutter-package/]assets/js/deps.bundle.js
    - [packages/my-flutter-package/]assets/js/deps.bundle.js.map

添加到您应用程序的

web/index.html
：

<body>
  <script src="flutter_bootstrap.js" async></script>
  <!-- ... -->
  <script src="[packages/my-flutter-package/]assets/js/deps.bundle.js" async></script>
</body>

模拟你的 JS 东西：https://dart.dev/interop/js-interop/usage

import 'dart:js_interop';

@JS('my_company.my_package.SomeClazz')
extension type SomeClazz._(JSObject _) implements JSObject {
  external SomeClazz(String id);
  external String src;
}

现在您可以在 dart 代码中使用该类。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.