解决通过ionic build --prod编译项目时出现“Could not find plugin "proposal-numeric-separator"问题

24 篇文章 1 订阅

解决通过ionic build --prod编译项目时出现“Could not find plugin "proposal-numeric-separator"问题

问题背景

最近把电脑的环境更新为最新的Ionic5、Angular8版本
ionic CLI版本为6.3.0:
Angular版本如下图
在这里插入图片描述
之后通过

ionic start myApp3 tabs --type=angular

创建了一个新的项目,然后在浏览器运行

ionic serve

是正常的,运行效果如下
在这里插入图片描述
但是编译为生产环境时

ionic build --prod

报如下错误

> ng.cmd run app:build:production
Generating ES5 bundles for differential loading...
An unhandled exception occurred: [BABEL] E:\ionicworkspace\mes\www\common-es2015.955615fb0c4be76032cc.js: Could not find plugin "proposal-numeric-separator". Ensure there is an entry in ./available-plugins.js for it. (While processing: "E:\\ionicworkspace\\mes\\node_modules\\@babel\\preset-env\\lib\\index.js")
See "C:\Users\zheng\AppData\Local\Temp\ng-DZEicN\angular-errors.log" for further details.
[ERROR] An error occurred while running subprocess ng.

        ng.cmd run app:build:production exited with exit code 127.

        Re-running this command with the --verbose flag may provide more information.

截图如下:
在这里插入图片描述

问题分析

根据上图的出错信息,可以发现是生成ES5代码的时候处理/node_modules/@babel/preset-env/lib/index.js文件时没有在/available-plugins.js中报找到插件“proposal-numeric-separator”。首先是问题出现在了babel模块中,这个模块的作用就是把咱们写的js代码翻译成各浏览器能识别的js代码,及ES6转ES5。找到node_modules/@babel/preset-env/lib/available-plugins.js中却是没有“proposal-numeric-separator”,下面我们就想需要添加一下。

问题解决

下面说一下问题的解决办法
1、首先安装这个插件@babel/plugin-proposal-numeric-separator

npm install @babel/plugin-proposal-numeric-separator

2、修改node_modules/@babel/preset-env/lib/available-plugins.js文件,增加这个插件

var _pluginProposalNumericSeparator = _interopRequireDefault(require("@babel/plugin-proposal-numeric-separator"));
var _default = {
  "proposal-numeric-separator": _pluginProposalNumericSeparator.default,
}

添加上面的信息之后,node_modules/@babel/preset-env/lib/available-plugins.js文件的完整内容如下:

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _pluginProposalNumericSeparator = _interopRequireDefault(require("@babel/plugin-proposal-numeric-separator"));

var _pluginSyntaxAsyncGenerators = _interopRequireDefault(require("@babel/plugin-syntax-async-generators"));

var _pluginSyntaxDynamicImport = _interopRequireDefault(require("@babel/plugin-syntax-dynamic-import"));

var _pluginSyntaxJsonStrings = _interopRequireDefault(require("@babel/plugin-syntax-json-strings"));

var _pluginSyntaxNullishCoalescingOperator = _interopRequireDefault(require("@babel/plugin-syntax-nullish-coalescing-operator"));

var _pluginSyntaxObjectRestSpread = _interopRequireDefault(require("@babel/plugin-syntax-object-rest-spread"));

var _pluginSyntaxOptionalCatchBinding = _interopRequireDefault(require("@babel/plugin-syntax-optional-catch-binding"));

var _pluginSyntaxOptionalChaining = _interopRequireDefault(require("@babel/plugin-syntax-optional-chaining"));

var _pluginSyntaxTopLevelAwait = _interopRequireDefault(require("@babel/plugin-syntax-top-level-await"));

var _pluginProposalAsyncGeneratorFunctions = _interopRequireDefault(require("@babel/plugin-proposal-async-generator-functions"));

var _pluginProposalDynamicImport = _interopRequireDefault(require("@babel/plugin-proposal-dynamic-import"));

var _pluginProposalJsonStrings = _interopRequireDefault(require("@babel/plugin-proposal-json-strings"));

var _pluginProposalNullishCoalescingOperator = _interopRequireDefault(require("@babel/plugin-proposal-nullish-coalescing-operator"));

var _pluginProposalObjectRestSpread = _interopRequireDefault(require("@babel/plugin-proposal-object-rest-spread"));

var _pluginProposalOptionalCatchBinding = _interopRequireDefault(require("@babel/plugin-proposal-optional-catch-binding"));

var _pluginProposalOptionalChaining = _interopRequireDefault(require("@babel/plugin-proposal-optional-chaining"));

var _pluginProposalUnicodePropertyRegex = _interopRequireDefault(require("@babel/plugin-proposal-unicode-property-regex"));

var _pluginTransformAsyncToGenerator = _interopRequireDefault(require("@babel/plugin-transform-async-to-generator"));

var _pluginTransformArrowFunctions = _interopRequireDefault(require("@babel/plugin-transform-arrow-functions"));

var _pluginTransformBlockScopedFunctions = _interopRequireDefault(require("@babel/plugin-transform-block-scoped-functions"));

var _pluginTransformBlockScoping = _interopRequireDefault(require("@babel/plugin-transform-block-scoping"));

var _pluginTransformClasses = _interopRequireDefault(require("@babel/plugin-transform-classes"));

var _pluginTransformComputedProperties = _interopRequireDefault(require("@babel/plugin-transform-computed-properties"));

var _pluginTransformDestructuring = _interopRequireDefault(require("@babel/plugin-transform-destructuring"));

var _pluginTransformDotallRegex = _interopRequireDefault(require("@babel/plugin-transform-dotall-regex"));

var _pluginTransformDuplicateKeys = _interopRequireDefault(require("@babel/plugin-transform-duplicate-keys"));

var _pluginTransformExponentiationOperator = _interopRequireDefault(require("@babel/plugin-transform-exponentiation-operator"));

var _pluginTransformForOf = _interopRequireDefault(require("@babel/plugin-transform-for-of"));

var _pluginTransformFunctionName = _interopRequireDefault(require("@babel/plugin-transform-function-name"));

var _pluginTransformLiterals = _interopRequireDefault(require("@babel/plugin-transform-literals"));

var _pluginTransformMemberExpressionLiterals = _interopRequireDefault(require("@babel/plugin-transform-member-expression-literals"));

var _pluginTransformModulesAmd = _interopRequireDefault(require("@babel/plugin-transform-modules-amd"));

var _pluginTransformModulesCommonjs = _interopRequireDefault(require("@babel/plugin-transform-modules-commonjs"));

var _pluginTransformModulesSystemjs = _interopRequireDefault(require("@babel/plugin-transform-modules-systemjs"));

var _pluginTransformModulesUmd = _interopRequireDefault(require("@babel/plugin-transform-modules-umd"));

var _pluginTransformNamedCapturingGroupsRegex = _interopRequireDefault(require("@babel/plugin-transform-named-capturing-groups-regex"));

var _pluginTransformNewTarget = _interopRequireDefault(require("@babel/plugin-transform-new-target"));

var _pluginTransformObjectSuper = _interopRequireDefault(require("@babel/plugin-transform-object-super"));

var _pluginTransformParameters = _interopRequireDefault(require("@babel/plugin-transform-parameters"));

var _pluginTransformPropertyLiterals = _interopRequireDefault(require("@babel/plugin-transform-property-literals"));

var _pluginTransformRegenerator = _interopRequireDefault(require("@babel/plugin-transform-regenerator"));

var _pluginTransformReservedWords = _interopRequireDefault(require("@babel/plugin-transform-reserved-words"));

var _pluginTransformShorthandProperties = _interopRequireDefault(require("@babel/plugin-transform-shorthand-properties"));

var _pluginTransformSpread = _interopRequireDefault(require("@babel/plugin-transform-spread"));

var _pluginTransformStickyRegex = _interopRequireDefault(require("@babel/plugin-transform-sticky-regex"));

var _pluginTransformTemplateLiterals = _interopRequireDefault(require("@babel/plugin-transform-template-literals"));

var _pluginTransformTypeofSymbol = _interopRequireDefault(require("@babel/plugin-transform-typeof-symbol"));

var _pluginTransformUnicodeRegex = _interopRequireDefault(require("@babel/plugin-transform-unicode-regex"));

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

var _default = {
  "proposal-numeric-separator": _pluginProposalNumericSeparator.default,
  "proposal-async-generator-functions": _pluginProposalAsyncGeneratorFunctions.default,
  "proposal-dynamic-import": _pluginProposalDynamicImport.default,
  "proposal-json-strings": _pluginProposalJsonStrings.default,
  "proposal-nullish-coalescing-operator": _pluginProposalNullishCoalescingOperator.default,
  "proposal-object-rest-spread": _pluginProposalObjectRestSpread.default,
  "proposal-optional-catch-binding": _pluginProposalOptionalCatchBinding.default,
  "proposal-optional-chaining": _pluginProposalOptionalChaining.default,
  "proposal-unicode-property-regex": _pluginProposalUnicodePropertyRegex.default,
  "syntax-async-generators": _pluginSyntaxAsyncGenerators.default,
  "syntax-dynamic-import": _pluginSyntaxDynamicImport.default,
  "syntax-json-strings": _pluginSyntaxJsonStrings.default,
  "syntax-nullish-coalescing-operator": _pluginSyntaxNullishCoalescingOperator.default,
  "syntax-object-rest-spread": _pluginSyntaxObjectRestSpread.default,
  "syntax-optional-catch-binding": _pluginSyntaxOptionalCatchBinding.default,
  "syntax-optional-chaining": _pluginSyntaxOptionalChaining.default,
  "syntax-top-level-await": _pluginSyntaxTopLevelAwait.default,
  "transform-arrow-functions": _pluginTransformArrowFunctions.default,
  "transform-async-to-generator": _pluginTransformAsyncToGenerator.default,
  "transform-block-scoped-functions": _pluginTransformBlockScopedFunctions.default,
  "transform-block-scoping": _pluginTransformBlockScoping.default,
  "transform-classes": _pluginTransformClasses.default,
  "transform-computed-properties": _pluginTransformComputedProperties.default,
  "transform-destructuring": _pluginTransformDestructuring.default,
  "transform-dotall-regex": _pluginTransformDotallRegex.default,
  "transform-duplicate-keys": _pluginTransformDuplicateKeys.default,
  "transform-exponentiation-operator": _pluginTransformExponentiationOperator.default,
  "transform-for-of": _pluginTransformForOf.default,
  "transform-function-name": _pluginTransformFunctionName.default,
  "transform-literals": _pluginTransformLiterals.default,
  "transform-member-expression-literals": _pluginTransformMemberExpressionLiterals.default,
  "transform-modules-amd": _pluginTransformModulesAmd.default,
  "transform-modules-commonjs": _pluginTransformModulesCommonjs.default,
  "transform-modules-systemjs": _pluginTransformModulesSystemjs.default,
  "transform-modules-umd": _pluginTransformModulesUmd.default,
  "transform-named-capturing-groups-regex": _pluginTransformNamedCapturingGroupsRegex.default,
  "transform-new-target": _pluginTransformNewTarget.default,
  "transform-object-super": _pluginTransformObjectSuper.default,
  "transform-parameters": _pluginTransformParameters.default,
  "transform-property-literals": _pluginTransformPropertyLiterals.default,
  "transform-regenerator": _pluginTransformRegenerator.default,
  "transform-reserved-words": _pluginTransformReservedWords.default,
  "transform-shorthand-properties": _pluginTransformShorthandProperties.default,
  "transform-spread": _pluginTransformSpread.default,
  "transform-sticky-regex": _pluginTransformStickyRegex.default,
  "transform-template-literals": _pluginTransformTemplateLiterals.default,
  "transform-typeof-symbol": _pluginTransformTypeofSymbol.default,
  "transform-unicode-regex": _pluginTransformUnicodeRegex.default
};
exports.default = _default;
  • 2
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
Ionic Angular 项目中实现消息推送功能并打包为 Android APK,你可以按照以下步骤进行操作: 1. 配置 Firebase Cloud Messaging (FCM):首先,你需要在 Firebase 控制台中创建一个项目,并启用 FCM。然后,在 Ionic 项目中安装 Firebase 相关的插件和依赖,如 `@angular/fire` 和 `firebase`. 接下来,按照 Firebase 文档的指引,将你的应用连接到 Firebase 项目。 2. 安装 Cordova 插件:使用 Cordova 插件来与 Android 设备的原生推送服务进行交互。在终端或命令行中进入 Ionic 项目的根目录,然后执行以下命令安装 Cordova 插件: ``` cordova plugin add cordova-plugin-fcm-with-dependecy-updated ``` 3. 配置 Android 平台:确保你已经添加了 Android 平台到 Ionic 项目中(如果没有,可以通过运行 `ionic cordova platform add android` 添加)。然后,根据 FCM 插件的文档,在 `config.xml` 文件中添加以下代码: ```xml <platform name="android"> <resource-file src="google-services.json" target="app/google-services.json" /> <preference name="FCM_ANDROID_SENDER_ID" value="your_sender_id" /> </platform> ``` 将 `your_sender_id` 替换为你在 Firebase 控制台中获得的 FCM 发送者 ID。 4. 处理推送通知:在你的 Ionic Angular 项目中,你可以使用 `@angular/fire` 提供的 `AngularFireMessaging` 服务来处理推送通知。在你的应用的相应页面或服务中,注入 `AngularFireMessaging`,并编写代码来处理收到的推送通知。 ```typescript import { AngularFireMessaging } from '@angular/fire/messaging'; // ... constructor(private afMessaging: AngularFireMessaging) {} // 监听推送通知 listenForPushNotifications() { this.afMessaging.messages.subscribe((message) => { console.log('Received push notification', message); // 在这里处理推送通知的逻辑 }); } ``` 5. 构建 APK:完成上述配置后,你可以使用以下命令构建 Android APK: ``` ionic cordova build android --prod ``` 这将生成一个已经配置了消息推送功能的 Android APK 文件。 请注意,以上步骤仅提供了一个大致的指导,具体的实现细节和代码可能会因你的项目结构和需求而有所不同。建议你参考相关插件和工具的文档以获取更详细的信息,并根据实际情况进行调整。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值