HTML 引入 JS 别名

在 HTML 中，可以使用 `<script>` 标签来引入 JavaScript 文件。如果要为引入的 JavaScript 文件设置别名，可以借助模块加载器（如 RequireJS）或构建工具（如 Webpack）来实现。

使用 RequireJS 的示例：

1. 引入 RequireJS 库文件：

<script src="require.js"></script>

2. 在 `<script>` 标签中使用 `data-main` 属性指定入口文件，并在入口文件中配置模块别名：

<script data-main="main.js" src="require.js"></script>

3. 在入口文件 `main.js` 中进行模块的配置和别名定义：

require.config({
  baseUrl: 'js',
  paths: {
    aliasName: 'path/to/actual/js/file'
  }
});

require(['aliasName'], function(aliasModule) {
  // 使用别名模块
});

在上述示例中，需要将 RequireJS 库文件下载并引入到 HTML 文件中。然后，通过在 `<script>` 标签中使用 `data-main` 属性指定入口文件，并在入口文件中配置模块的路径和别名。最后，使用 `require` 函数来加载并使用别名模块。

使用 Webpack 的示例：

1. 安装 Webpack 和相关依赖：

npm install webpack webpack-cli --save-dev

2. 在项目根目录下创建 `webpack.config.js` 文件，并进行相关配置：

const path = require('path');

module.exports = {
  // 配置入口文件和输出路径等
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  // 配置模块的解析规则和别名
  resolve: {
    alias: {
      aliasName: path.resolve(__dirname, 'src/path/to/actual/js/file')
    }
  }
};

3. 在 HTML 文件中引入生成的 JavaScript 文件：

<script src="dist/bundle.js"></script>

4. 在项目的 JavaScript 文件中使用别名模块：

import aliasModule from 'aliasName';

// 使用别名模块

以上是通过 RequireJS 和 Webpack 两种常见的方式在 HTML 中引入 JavaScript 文件并设置别名的示例。具体选择哪种方式取决于您的项目需求和工具链配置。希望对您有所帮助！如果还有其他问题，请随时提问。