如何在 Vue+webpack+vue-loader 项目中从不同的 js 文件中导入函数
Posted
技术标签:
【中文标题】如何在 Vue+webpack+vue-loader 项目中从不同的 js 文件中导入函数【英文标题】:How to import functions from different js file in a Vue+webpack+vue-loader project 【发布时间】:2017-09-22 08:05:39 【问题描述】:(为什么这不是 How do I include a javascript file in another JavaScript file? 的骗子,请参阅结尾)
Javascipt + Vue + webpack + vue-loader noob...在最简单的事情上磕磕绊绊!
我有App.vue
,它有一个模板:
<template>
<div id="app">
<login v-if="isTokenAvailable()"></login>
</div>
</template>
我已经在methods
中以常规方式为Vue 声明了isTokenAvailable
方法。它使用了我在单独的js
文件中编写的函数:
<script>
import * as mylib from './mylib';
export default
....
methods:
isTokenAvailable: () =>
return mylib.myfunc();
</script>
mylib
开头是这样的:
import models from './model/models'
import axois from 'axios'
export default function()
// functions and constants
当我运行项目时,我收到以下警告:
export 'myfunc' (imported as 'mylib') was not found in './mylib'
我知道我没有正确导入或声明 javascript 模块...但似乎有很多方法可以做到这一点,加上 Vue 中范围界定的复杂性,我不确定什么是正确的怎么办?
提前致谢。
为什么这不是骗子:How do I include a JavaScript file in another JavaScript file?
似乎没有解决问题,特别是在 vuejs 的上下文中。
我试过这个:
<script>
const mylib = require('./mylib');
...
</script>
函数修改为:exports.myfunc = function()
我应该有一些其他的依赖才能让它工作吗?因为我得到一个不同的错误:
[Vue warn]: Error in render function:
TypeError: mylib.myfunc is not a function
【问题讨论】:
How do I include a JavaScript file in another JavaScript file?的可能重复 @DanielCooke 我知道上面是相似的,但它不是同一个问题 - 这是在Vue
的上下文中,我在那个答案中使用了export
,但它仍然没有'不工作
您需要阅读 Javascript 中的模块来解决您的问题。您需要了解您使用的是什么模块加载器。你在使用 webpack 吗?系统JS?你可以试试 const 'myfunc' = require('mylib'); node.js 导入语法。
@DanielCooke 谢谢,我正在使用 webpack。我已经尝试过const ...
,但随后在控制台中出现了另一个错误:mylib.myfunc 不是函数
"mylib.myfunc();"这意味着你应该返回对象,但是你导出函数
【参考方案1】:
假设我想将数据从src/mylib.js
导入组件:
var test =
foo () console.log('foo') ,
bar () console.log('bar') ,
baz () console.log('baz')
export default test
在我的 .Vue 文件中,我只是从 src/mylib.js
导入了 test
:
<script>
import test from '@/mylib'
console.log(test.foo())
...
</script>
【讨论】:
非常有帮助和有用。 谢谢!干净且合乎逻辑。 这太完美了!如果有人好奇我为什么要使用这种方法,我需要一个单独的批处理文件来运行函数,现在我可以轻松地将数据传递给 mylib 并使用 return 语句运行所需的函数!很棒的工作。 这应该适用于香草js吗?我得到Unexpected identifier
的导入部分【参考方案2】:
经过几个小时的折腾,我最终得到了一些有用的东西,在这里的一个类似问题中得到了部分回答:How do I include a JavaScript file in another JavaScript file?
但是有一个导入搞砸了其余部分:
在 .vue
文件中使用 require
<script>
var mylib = require('./mylib');
export default
....
以mylib
导出
exports.myfunc = () => ....
避免import
我的实际问题(我认为这不相关!)是mylib.js
本身使用其他依赖项。由此产生的错误似乎与此无关,webpack
没有转译错误,但无论如何我有:
import models from './model/models'
import axios from 'axios'
只要我不在.vue
组件中使用mylib
,它就可以工作。但是,一旦我在那里使用mylib
,就会出现此问题中描述的错误。
我改成:
let models = require('./model/models');
let axios = require('axios');
一切都按预期工作。
【讨论】:
WHYYYYYYY???这是荒唐的。如果我正在使用诸如 Babble 或 Webpack 之类的编译器,那么为什么我们不能使用import
语句?我想拔掉头发……或者放弃 VueJS,不确定是哪个。
感谢您,我为此工作了 2 个小时...您的回答拯救了这一天!
对我来说这会抛出 require is not defined。【参考方案3】:
我喜欢 Anacrust 的回答,不过,由于“console.log”被执行了两次,我想为src/mylib.js
做一个小更新:
let test =
foo () return 'foo' ,
bar () return 'bar' ,
baz () return 'baz'
export default test
所有其他代码保持不变...
【讨论】:
【参考方案4】:我试图组织我的 vue 应用程序代码,并遇到了这个问题,因为我的组件中有很多逻辑并且不能使用其他子组件,所以在单独的 js 文件中使用许多功能是有意义的并在 vue 文件中调用它们,所以这是我的尝试
1)组件(.vue 文件)
//MyComponent.vue file
<template>
<div>
<div>Hello name</div>
<button @click="function_A">Read Name</button>
<button @click="function_B">Write Name</button>
<button @click="function_C">Reset</button>
<div>message</div>
</div>
</template>
<script>
import Mylib from "./Mylib"; // <-- import
export default
name: "MyComponent",
data()
return
name: "Bob",
message: "click on the buttons"
;
,
methods:
function_A()
Mylib.myfuncA(this); // <---read data
,
function_B()
Mylib.myfuncB(this); // <---write data
,
function_C()
Mylib.myfuncC(this); // <---write data
;
</script>
2)外部js文件
//Mylib.js
let exports = ;
// this (vue instance) is passed as that , so we
// can read and write data from and to it as we please :)
exports.myfuncA = (that) =>
that.message =
"you hit ''myfuncA'' function that is located in Mylib.js and data.name = " +
that.name;
;
exports.myfuncB = (that) =>
that.message =
"you hit ''myfuncB'' function that is located in Mylib.js and now I will change the name to Nassim";
that.name = "Nassim"; // <-- change name to Nassim
;
exports.myfuncC = (that) =>
that.message =
"you hit ''myfuncC'' function that is located in Mylib.js and now I will change the name back to Bob";
that.name = "Bob"; // <-- change name to Bob
;
export default exports;
3)看到它在行动: https://codesandbox.io/s/distracted-pare-vuw7i?file=/src/components/MyComponent.vue
编辑
在获得更多 Vue 经验后,我发现您也可以使用 mixins 将代码拆分为不同的文件,并使其更易于编码和维护,请参阅 https://vuejs.org/v2/guide/mixins.html
【讨论】:
以上是关于如何在 Vue+webpack+vue-loader 项目中从不同的 js 文件中导入函数的主要内容,如果未能解决你的问题,请参考以下文章
如何使用 Vue-Loader / Webpack 指向外部(动态)资产
如何使用 webpack 和 vue-loader 更改 .vue 文件中 <img> 的 src 属性?
由搭建Vue.js了解webpack,vue-loader和热重载