如何在 Vue+webpack+vue-loader 项目中从不同的 js 文件中导入函数

Posted 2023-02-22

技术标签:

【中文标题】如何在 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