Learn Require with Questions and Answers

I need to introduce require in vue3, how to import it?

In Vue 3, it is recommended to use ES6 module syntax to import dependencies. But if you must use the CommonJS specification require, you can requireuse alternatives, such as using import()the function to achieve dynamic import.

Here is import()a requiresample code using import :

// 引入 require
 const require = import.meta.globEager('./path/to/your/require/module.js') 
// 使用 require
 const module = require['yourModule']

In the above code, import.meta.globEagerwe imported requirethe module through the function require['yourModule']and used it in the way.

It should be noted that since import()is an asynchronous function, you need to use awaitthe keyword to wait for its return value.

Also, since import()is a dynamically imported function, it cannot be used where it is statically imported. Therefore, you need import()to put the call into an async function, or setupuse it in a lifecycle hook function.

Is there any way to import {require} from xxx? 

This way of writing is not supported. Because requireis an import method in the CommonJS specification, and the ES6 module specification is different from the CommonJS specification, and their syntax and semantics are very different.

In the ES6 module specification, we use importthe keyword to import modules instead requireof the keyword used in the CommonJS specification. Although in the Node.js environment, we can use requirethe keyword to import CommonJS modules, but in the browser environment, requireit is not supported, and only the ES6 module specification is widely supported.

Therefore, if you need to use requireimport , you can use import()the method I gave above to implement dynamic imports using functions instead. Alternatively, if your project already uses the CommonJS spec to import modules, you might consider using tools to convert those modules into ES6 modules for use in Vue 3.

So how to quote require in the writing method of vue2? 

In Vue2, requirefunctions can be used to import required modules or files. Normally, functions can be <script>used in the tags of Vue components require.

Here is a sample code:

 

<template>
  <div>
    <!-- your template here -->
  </div>
</template>

<script>
  // 引入需要的模块或文件
  const yourModule = require('./yourModule.js');

  export default {
    name: 'YourComponentName',
    data() {
      return {
        // your data here
      }
    },
    methods: {
      // your methods here
    },
    created() {
      // your created hook code here
    }
    // ...
  }
</script>

<style>
  /* your styles here */
</style>

In the code above, we have requireimported a yourModule.jsmodule or file named . Please note that using requirethe function requires the module to be installed first require, which can npm install requirejsbe installed using the command.

So how can I modify yourModule dynamically?

If you need to dynamically modify yourModulethe value of a variable, you can declare it as an dataor computedattribute of the Vue component, and then access and modify it through this.$data.yourModuleor .this.$computed.yourModule

For example:

<template>
  <div>
    <p>{
    
    { yourModule }}</p>
    <button @click="updateModule">Update</button>
  </div>
</template>

<script>
  const yourModule = require('./yourModule.js');

  export default {
    name: 'YourComponentName',
    data() {
      return {
        yourModule: yourModule // 将 yourModule 声明为 data 属性
      }
    },
    methods: {
      updateModule() {
        this.yourModule = require('./yourNewModule.js'); // 修改 yourModule 的值
      }
      // your other methods here
    },
    // your other options here
  }
</script>

<style>
  /* your styles here */
</style>

In the above code, we will yourModuledeclare it as dataa property of the Vue component, and then this.yourModuleaccess and modify its value via . In updateModulethe method, we use requirethe function to introduce a new module yourNewModule.js, and then assign it to yourModule, so that yourModulethe value can be dynamically modified.