uniapp引入模块化js文件和非模块化js文件的四种方式

下面我将详细介绍 uniapp 引入模块化 js 文件和非模块化 js 文件的四种方式。

引入模块化 js 文件的方式

1. 直接引入

可以通过 import 语句直接引入一个模块化 js 文件，如下所示：

import {add, subtract} from '@/utils/calculate';

其中 @ 表示项目根目录，calculate 是 utils 目录下 calculate.js 文件的名称，add 和 subtract 表示导入的对象或方法。

1. CommonJS 规范

可以使用 CommonJS 规范，在模块中使用 module.exports 导出模块，然后在需要引用该模块的文件中使用 require 引入，如下所示：

// calculate.js
function add(a, b) {
  return a + b;
}

function subtract(a, b) {
  return a - b;
}

module.exports = {
  add,
  subtract
};

// index.vue
const {add, subtract} = require('@/utils/calculate');

其中 require('@/utils/calculate') 返回的对象包含 calculate.js 中导出的所有属性和方法，可以根据需要使用解构赋值来获取需要的属性和方法。

引入非模块化 js 文件的方式

1. 直接引入

可以通过 import 语句直接引入一个非模块化 js 文件，如下所示：

import '@/js/polyfill';

其中 @ 表示项目根目录，polyfill 是 js 目录下的一个非模块化 js 文件。

1. script 标签

可以使用 script 标签引入一个非模块化 js 文件，如下所示：

<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>

以上是 uniapp 引入模块化 js 文件和非模块化 js 文件的四种方式。需要注意的是，import 和 CommonJS 规范只能用于引入模块化 js 文件，而直接引入和 script 标签可以用于引入任何 js 文件。所以在使用时需要根据实际情况选择适当的方式来引入 js 文件。