我正在尝试将js文件导入另一个js文件。我将文件夹路径放在const前缀中,并在要导入的文件名之前添加了该路径。但是它说从未使用过const前缀。我在网上看了看,发现有很多人用一个变量这样做。为什么这对我不起作用?
const prefix = './store_modules/'; import state from prefix + 'state'; import getters from prefix + 'getters'; import mutations from prefix + 'mutations'; import actions from prefix + 'actions';
export default { state, getters, mutations, actions };
版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。
在JavaScript ES6模块导入语句中,你不能直接使用变量来动态指定导入的模块路径。导入模块的路径需要是静态字符串字面量。这是因为Webpack、Babel等打包工具和JavaScript引擎在编译时需要解析这些导入路径,而动态路径会在编译阶段无法被确定。
正确的做法是直接将路径写入import
语句中,像这样:
import state from './store_modules/state';
import getters from './store_modules/getters';
import mutations from './store_modules/mutations';
import actions from './store_modules/actions';
如果你有很多类似的导入并且希望减少重复,可以考虑以下几种方式:
store_modules
目录下创建一个index.js
文件,然后在这个文件里导出所有子模块。之后你就可以通过导入这个索引文件来一次性获取所有模块。// ./store_modules/index.js
export * from './state';
export * from './getters';
export * from './mutations';
export * from './actions';
然后在其他地方导入:
import { state, getters, mutations, actions } from './store_modules';
记住,直接用变量动态导入在ES模块规范中是不支持的,但随着动态导入(import()
表达式)的引入,可以在运行时按需加载模块,但这与你的原始需求有所不同,因为它返回的是一个Promise对象。
例如,动态导入看起来像这样:
let modulePath = './store_modules/state';
import(modulePath).then((module) => {
// 使用导入的模块
});
但这通常用于代码分割和懒加载场景,可能并不适合你当前的需求。