Angular 5集成rm-emoji-picker遇Uncaught SyntaxError错误求助

看起来你遇到的是ES模块语法在未转译的scripts bundle中无法被识别的问题——Angular CLI的scripts数组里的文件是直接加载到浏览器的，不会经过Webpack的ES6转译，而rm-emoji-picker源码里用了import语法，浏览器原生不支持这种写法（尤其是在旧版本环境下），所以才抛出了Unexpected identifier错误。

下面是针对你的Angular 5.1.0/CLI 1.6.0环境的具体解决方案：

1. 正确配置jQuery依赖 #

rm-emoji-picker依赖jQuery，首先要确保jQuery能在Angular项目中全局可用：

• 安装jQuery及类型定义：

  npm install jquery --save
  npm install @types/jquery --save-dev
  

• 打开angular-cli.json（Angular 5用的是这个配置文件，不是后来的angular.json），在scripts数组中添加jQuery的路径：

  "scripts": [
    "../node_modules/jquery/dist/jquery.min.js"
  ]
  

• 在项目根目录的typings.d.ts文件中添加全局声明（如果没有这个文件就新建一个）：

  declare var $: any;
  

2. 调整rm-emoji-picker的引入方式 #

不要把rm-emoji-picker放到scripts数组里，而是通过ES模块导入或者脚本加载器来处理：

方案A：使用ES模块导入（推荐） #

安装rm-emoji-picker后，直接在需要使用的组件中导入：

import 'rm-emoji-picker/dist/rm-emoji-picker.css'; // 先导入样式
import EmojiEditor from 'rm-emoji-picker/dist/EmojiEditor';
import EmojiCategory from 'rm-emoji-picker/dist/EmojiCategory';
// 其他需要的模块按需导入

这种方式下，Webpack会自动转译ES6语法，不会出现未识别的import错误。

方案B：使用script-loader加载（如果方案A无效） #

如果rm-emoji-picker的源码没有正确打包成UMD模块，安装script-loader来处理：

npm install script-loader --save-dev

然后在组件中用以下方式引入：

import 'rm-emoji-picker/dist/rm-emoji-picker.css';
require('script-loader!rm-emoji-picker/dist/rm-emoji-picker.js');

script-loader会把模块内容当作全局脚本执行，避免ES语法解析问题。

3. 验证配置是否生效 #

• 启动项目：ng serve，打开浏览器控制台输入$，确认jQuery已全局定义
• 在组件中初始化emoji picker，比如：

  ngAfterViewInit() {
    const emojiEditor = new EmojiEditor({
      // 你的配置项
      trigger: '#emoji-trigger'
    });
  }
  

额外排查点 #

• 检查rm-emoji-picker的版本，确保它支持ES模块或者能在Node 8环境下正常工作
• 如果还是有错误，尝试删除node_modules和package-lock.json，重新执行npm install清除依赖缓存

内容的提问来源于stack exchange，提问作者Xalion