Laravel-Mix编译@google/model-viewer报错，CDN引入正常求解决

我在实现<model-viewer>组件时，通过CDN地址https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js引入完全正常，但用Laravel-Mix预编译该包时出现大量警告和错误。尝试了以下5种引入方式均失败：

• require("@google/model-viewer");
• window.modelViewer = require("@google/model-viewer");
• import * as ModelViewerElement from '@google/model-viewer';
• import ModelViewerElement from '@google/model-viewer';
• import { ModelViewerElement } from '@google/model-viewer';

可行解决方案 #

1. 直接引入预编译版本绕开编译 #

修改webpack.mix.js，配置别名指向已编译好的min版文件，避免Laravel-Mix重新编译该包：

mix.webpackConfig({
  resolve: {
    alias: {
      '@google/model-viewer': '@google/model-viewer/dist/model-viewer.min.js'
    }
  }
});

之后在你的JS文件中用任意一种方式引入即可，比如：

import '@google/model-viewer';

2. 配置Webpack忽略该包的编译规则 #

在webpack.mix.js中添加规则，排除@google/model-viewer的Babel编译，因为该包本身已经是兼容好的版本：

mix.webpackConfig({
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules\/@google\/model-viewer/,
        use: 'babel-loader'
      }
    ]
  }
});

3. 直接复制预编译文件到静态目录 #

如果上述配置都无效，可以直接把预编译文件复制到public目录，手动引入：
在webpack.mix.js中添加：

mix.copy('node_modules/@google/model-viewer/dist/model-viewer.min.js', 'public/js/model-viewer.min.js');

然后在页面模板中引入：

<script src="{{ asset('js/model-viewer.min.js') }}"></script>

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