如何使用require/import替代HTML标签，解决pixi.js引入及ESLint检测问题

1. 让ESLint识别pixi.js #

• 在项目根目录的.eslintrc.js（或.eslintrc）中添加全局变量声明：

  module.exports = {
    // 其他配置项
    globals: {
      PIXI: 'readonly'
    }
  };
  

• 若使用eslint-plugin-import插件，补充模块解析配置：

  module.exports = {
    // 其他配置项
    settings: {
      'import/resolver': {
        node: {
          extensions: ['.js', '.ts'],
          moduleDirectory: ['node_modules', './src']
        }
      }
    }
  };
  

2. 正确配置import/require引入 #

• 先确认依赖安装完整，执行：

  npm install pixi.js --save
  

• 标准引入写法：

  // ES6 模块引入
  import * as PIXI from 'pixi.js';
  
  // CommonJS 引入
  const PIXI = require('pixi.js');
  

• 若使用TypeScript，需安装类型定义：

  npm install @types/pixi.js --save-dev
  

3. 检查打包工具配置 #

• Webpack用户需确保resolve.modules包含node_modules：

  module.exports = {
    resolve: {
      modules: ['node_modules']
    }
  };
  

• Vite或Parcel等工具无需额外配置，默认会解析node_modules模块

内容的提问来源于stack exchange，提问作者Joffrey Vedlem Ved