js中import 和require 出现@ 是什么意思

最新推荐文章于 2024-06-07 09:37:33 发布
最新推荐文章于 2024-06-07 09:37:33 发布
阅读量4k 收藏 6
点赞数 1
分类专栏： vue 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41402809/article/details/115403891
版权

含义

在这里插入图片描述
在这里插入图片描述

表示指定路径名，可以由webpack配置

如何配置

可以在webpack resolve 中配置
在这里插入图片描述

Resolve配置webpack如何寻找模块对应的文件。webpack内置JavaScript模块化语法解析功能，默认会采用模块化标准里约定好的规则去寻找，但你可以根据自己的需要修改默认的规则。

resolve.alias配置项通过别名来把原来导入路径映射成一个新的导入路径。

 
 

配置之后

import Button from '@/components/button'导入时，实际上被alias等价替换成import Button from './src/components/button'。

海绵泡泡
关注
  • 1
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript中使用import 和require打包后实现原理分析
10-18
主要介绍了JavaScript中使用import 和require打包后实现原理分析,需要的朋友可以参考下
详解Node中导入模块require和import的区别
08-29
Node.js 中导入模块 require 和 import 的区别 Node.js 中的模块化编程是基于 CommonJS 规范的，而在 ES6 中，则是基于 ES6 模块标准的。在 Node.js 中，我们使用 require 函数来导入模块，而在 ES6 中，我们使用 ...
【JS】import 、import() 与 @import 的区别
小安驾到的博客
02-17 1602
import xx from '...' 是一种导入方式，是es6模块化的新语法，必须要写到js文件的最上面；
vuejs webpack模板里import路径中@符号是什么意思以及不能自动刷新解决方法
有问题可关注公众号：前端研究院 后台输入问题回复
04-25 1万+
问：用vuejs的webpack模板生成的项目中，router/index.js里面有一句：import Hello from '@/components/Hello'这里路径前面的“@”符号表示什么意思？回答没事儿就去看看vue模板的代码，里面都有，这是webpack的路径别名，相关定义在这里：resolve: { // 自动补全的扩展名 extensions: ['.js', ...
js模块(module)和导入，导出（import，export）
最新发布
I_am_shy的博客
06-07 509
一个模块（module）就是一个文件。一个脚本就是一个模块。就这么简单。模块可以相互加载，并可以使用特殊的指令export和import来交换功能，从另一个模块调用一个模块的函数或者变量，常量...，即可以引入并调用其他模块的方法，也可以导出自身的方法给其他模块使用，
import(‘@/路径‘)和import(‘../路径‘)区别
HISTRORY的博客
06-09 1422
import('@/路径')表示从当前项目的根目录开始寻找模块，@符号表示根目录的别名，通常是在webpack等打包工具中定义的。一般来说，import('@/路径')用于导入项目中的公用模块，而import('../路径')则用于导入当前模块的相关模块。import('@/路径')和import('../路径')都是ES6模块化中的导入语句，但是它们的路径表示方式略有不同。import('../路径')表示从当前模块所在的目录开始寻找模块，../表示上级目录，可以使用相对路径来导入模块。
JavaScript 模块导入导出（export与import）用法
背心的博客
11-02 6778
JavaScript 模块导入导出（export与import）用法
vue中import引入模块路径中@符号是什么意思
qq_27009517的博客
01-17 2748
在编写vue文件中引入模块 import('@/view/single-page/home') 这里路径前面的“@”符号表示什么意思？ // vue.config.js chainWebpack: config => { config.resolve.alias .set('@', resolve('src')) // key,value自行定义，比如.set('@@', resolve('src/components')) .set('_c', reso
Javascript(es2016) import和require用法和区别详解
10-19
本篇文章主要介绍了Javascript(es2016) import和require用法和区别详解，具有一定的参考价值，有兴趣的可以了解下
Vue 中 import from @ 是什么意思？怎么配置？
Andrew_SJ的博客
07-02 5269
注意，如果是typescript中，其配置文件在tsconfig.json中。 比如： // /router/index.js import Home from '@views/home/index.vue' 配置文件中： // tsconfig.json { "compilerOptions": { "target": xxx; "baseURL": "./", "paths": { "@/*": ["./src/*"] }, 这里compilerOpti.
浅谈script，link，import，@import引入
weixin_49295874的博客
02-25 3764
1.script，link是html标签，script可以引入js,即可调用引入js里面的方法，link标签可以引入css样式图片。4.可操作性:link可以通过js操作dom（盗墓 文档对象模型）插入link标签改变样式，而@import不能。2.import是tp语法，可以引入js也可引入css。3.兼容性:link（是标签）没有兼容问题，@import不兼容ie5以下的浏览器.1.从属关系:link是html标签，@import是css提供的.链接式和导入式有什么区别（链接式，导入式，内嵌式，行内）
require.js的用法：
Stefan_liu的专栏
05-25 725
require.js的用法： 1.作用：     1》实现js文件的异步加载，避免网页失去相应。 2》管理模块之间的依赖性，便于代码的编写和维护。 2.下载     官网下载地址：http://requirejs.org/docs/download.html#latest 3.在主界面(index.html)中引入require.js     脚本文件放到</html>结束标签下面，有...
前端 ES6 环境下 require 动态引入图片以及问题
linzi19900517的博客
02-20 5257
ES6 环境中，通过 require 的方式引入图片体积大小对比以及打包建议。
.vue文件中 import xxx from '@/xxx' 中@含义
9527的专栏
08-28 4465
@的定义在 vue.config.js中 'use strict' const path = require('path') const defaultSettings = require('./src/settings.js') function resolve(dir) { return path.join(__dirname, dir) } const name = defaultS...
JS中import的用法
weixin_61766112的博客
09-14 7735
import在JavaScript使用
28. @Required 注解有什么用？
最帅程序猿的博客
10-20 1699
@Required 应用于 bean 属性 setter 方法。此注解仅指示必须在配置时使用 bean 定义中的显式属性值或使用自动装配填充受影响的 bean 属性。如果尚未填充受影响的 bean 属性，则容器将抛出 BeanInitializationException。 示例： public class Employee { private String name; @Required public void setName(String name){ this.name=name; } public
关于vue 动态引入（异步加载import和require）组件的方法和坑（按需懒加载组件，动态生成路由）babel-plugin-dynamic-import-node 优化编译速度
热门推荐
yorcentroll的博客
01-26 2万+
关于vue 动态引入（异步加载）组件的方法和坑（按需懒加载组件，动态生成路由）babel-plugin-dynamic-import-node 优化编译速度
js @@ 符号含义
一出好剧
10-26 2521
JavaScript @@ 符号
在JavaScript或TypeScript中，@符号的用法
celebrateyang的博客
02-12 614
在JavaScript或TypeScript中，@符号在导入语句中用作包名的一部分，表示该包是一个命名空间包（Namespace package）或作用域包（Scoped package）。作用域通过前缀@和随后的作用域名称来标识，例如@reduxjs/toolkit中的@reduxjs就是作用域名称，而toolkit是包名。要安装一个作用域包，你可以使用npm或yarn等包管理器，就像安装其他任何NPM包一样。@在导入语句中表示导入的是一个作用域包，这是NPM提供的一种组织和管理相关包的机制。
js中import和require的区别
06-28
### 回答1： `import` 和 `require` 都是在 JavaScript 中用来导入模块的命令。但它们有一些重要的区别: 1. `import` 是 ECMAScript (ES) 模块的语法，而 `require` 是 CommonJS 模块的语法。 2. 使用 `import` 可以很容易地将一个模块中的多个部分分别导入到当前模块中，而使用 `require` 只能将整个模块导入。 3. `import` 是编译时加载，而 `require` 是运行时加载。 4. `import` 必须放在文件的顶部,而 `require` 可以放在文件的任何地方。 总而言之，如果你的项目使用了 ECMAScript 模块系统，则应使用 `import`；如果使用了 CommonJS 模块系统，则应使用 `require`。 ### 回答2： 在JavaScript中，模块是一个独立的、可重复使用的代码部分，可以被导入到其他模块中使用。Node.js在ES6之前并没有原生的模块系统，而是通过CommonJS规范实现了一套模块系统，其中包括两个常用的引入外部模块的方式：require和import。 1. require - 作用：引入一个模块。 - 用法：require('模块路径')，其中模块路径可以是相对路径或绝对路径。 - 特点：同步加载，使用时必须使用完整路径或相对路径。 - 语法： ``` // 引入fs模块 var fs = require('fs'); // 引入自定义的模块 var myModule = require('./myModule'); ``` 2. import - 作用：引入一个模块。 - 用法：import from '模块路径'，其中模块路径可以是相对路径或绝对路径。 - 特点：ES6引入的模块导入方式，异步加载，会在代码执行前先执行，可以使用相对路径。 - 语法： ``` // 引入fs模块 import fs from 'fs'; // 引入自定义的模块 import myModule from './myModule'; ``` 总结： - require是Node.js实现的引入模块的方式，可以在Node.js中使用； - import是ES6中定义的模块导入方式，可以在浏览器端使用； - require同步加载，import异步加载； - 使用时require必须使用完整路径或相对路径，而import可以使用相对路径； - require是通过module.exports导出，而import是通过export default导出。 ### 回答3： 在JavaScript中，我们可以使用import和require关键字来引入其他文件中的模块或代码。虽然它们都可以实现模块的导入，但它们的使用方式和机制有许多不同的地方。 首先，import是ES6中的新特性，而require是CommonJS的一个技术实现。这意味着在使用import时，需要在浏览器中运行支持ES6的JavaScript引擎。而require则可以在主流的浏览器和Node.js环境中运行。 其次，使用import时，可以按照特定的格式导入需要使用的模块或函数，如下所示： ``` import {module} from 'module-name'; ``` 这会将module-name中的module导入到你的代码中，你可以直接使用它。同时，你还可以使用import语句作为延迟加载模块的方式，这意味着只有在需要使用该模块时才会进行加载。这有助于提高性能，尤其是在加载大型模块时。 相比之下，使用require时，则需要使用类似于下面这样的语法来导入模块： ``` const module = require('module-name'); ``` 这意味着你需要在代码中显示地声明需要使用哪些模块。这样做可以让代码更加易读，因为所有使用的模块都位于代码的开头部分。 最后还要指出的是，使用import和require的方式可能会对代码的运行环境产生不同的影响。import语句只能在模块的顶部进行使用，而不能在循环或条件语句中使用。但require可以在运行时根据需要动态加载模块。在使用这两种方式时，需要仔细考虑自己的代码逻辑和需求，找到最适合自己的方式。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值