如何在 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 属性?

vue24-webpack+vue-loader

由搭建Vue.js了解webpack,vue-loader和热重载

由搭建Vue.js了解webpack,vue-loader和热重载

Vue + Webpack + Vue-loader 功能介绍