(黑马教程笔记)前端工程化-模块化规范

2024-05-12 21:48:07

一，模块化规范的发展

就是说，es6提供的模块化规范成为主流，所谓模块化，就是和组件化类似的思想。、

二，es6的模块化

node对es6的模块化支持并不是很好，所以需要结合babel来体验高级的ES6模块化，可以把高级的、有兼容性的js代码转换为低级的没有兼容性的js代码。
想要使用babel就需要在node环境下配置babel环境包。
第一步：npm install --save-dev @babel/core @babel/cli @babel/preset-env @babel/node
第二步：npm install --save @babel/polyfill
第三步：项目跟目录创建文件babel.config.js
第四步：babel.config.js的文件内容如下：

const presets=[       //presets是一个语法转换的数组['@babel/env',{   //这里的@babel/env是刚刚装的一个语法插件targets:{      //转换完成的这些代码需要支持这些浏览器edge:'17',firefox:'60',chrome:'67',safari:'11.1'}}]
]
module.exports={presets}//把presets向外暴露出去,供babel进行使用

第五步，运行npx babel-node index.js（js文件名），来利用babel执行名为index.js的js文件。

能跑起来就说明babel已经配置完成了，接下来就可以利用node执行es6模块化的高级特性啦！

三，es6模块化的基本使用

也就是说另外的文件中的变量和函数是该文件私有的，你想要在其他文件中使用，就需要把他们导出（当然啦。你可以只导出你想要导出的部分就可以，不导出的别的文件就访问不到。）
导出方法：export default{想要导出的参数}
另一个文件想要使用的话，还需要导入一下，
导入方法：import 接收名称 from 路径
例如：在m1.js中：

let a=10
let b=20
let c=30
function show(){console.log("aaaa")
}
export default{a,c,show
}

在index.js中：

import m1 from './m1.js'
m1.show()
console.log(m1.a)

于是：

另外，值得注意的是：在每个模块中，只允许使用唯一的一次export default，否则会报错。

四，按需导出与按需导入

按需导出导入和默认导出导入不冲突，是可以一起存在的：

let a=10
let b=20
let c=30
function show(){console.log("aaaa")
}
export default{a,c,show
}
export let s1="s11111"
export let s2="s22222"
export function s3(){console.log("s3333")
}

import m1,{s1,s2 as s22,s3} from './m1.js'
//m1对应默认导出的，剩余的是按需导出的
// as可以起别名
console.log(m1)
console.log(s1)
console.log(s22)
console.log(s3)

五，直接导入并执行模块代码

就直接导入并执行代码了！

(黑马教程笔记)前端工程化-模块化规范相关推荐

基于前端Js模块化规范的粗浅应用
前言之前做项目时,由于刚起步,所以很多同事在Js的规范上写的很凌乱.又刚好自己在慕课网上接触了Js模块化的概念,顿时觉得怎么会有这么规范的写法.所以特别写篇博客,记录下. Js架构如下整个JS架构 ...
前端工程化概述||模块化相关规范
前端工程化模块化概述浏览器端模块化规范服务器端模块化规范大一统的模块化规范 – ES6模块化 ① npm install --save-dev @babel/core @babel/cli @ ...
前端工程化、模块化方案教程大全，现代前端高手进阶必经之路（欢迎收藏）...
关注掘金和github很久了,但是一直没有在上面发表什么文章,这次静下心来写了个前端的目前工程化与模块化方案的总结,后期会继续更新,为开源社区做出更大贡献. 前端的模块化方案从早年的require.j ...
《前端工程化体系设计与实践》-笔记
github 地址:https://github.com/boijs/boi 这篇博客是我对<前端工程化体系设计与实践>做的笔记,这本书本身讲的也是比较范的东西,只是给出整体的前端搭建工程 ...
vue全套笔记，前端工程化+vue指令+脚手架
文章目录一. 前端工程化 webpack 的基本使用 webpack 中的插件 webpack 中的 loader 打包发布 Source Map的使用注意,实际开发不需要自己配置webpack ...
JavaWeb全套教程笔记_前端技术
JavaWeb全套教程笔记第一阶段_前端技术自己整理一套详细的笔记资料,可以满足平时查阅复习,还能帮助别人学习JavaWeb知识.JavaWeb教程分为四个阶段前端技术 1.HTML.2.CSS. ...
【web前端教程笔记】
前端教程笔记这里写目录标题 **前端教程笔记** 笔记1 1.什么是HTML,CSS? 2.如何去写代码?写到哪里? 笔记2 1.VSCode编辑器 2.如何安装插件?安装什么插件? 3.学习编辑器 ...
对前端工程化、模块化、组件化开发的理解
参考理解一: 提到前端往往很多人的映像就是入门简单,HTML.CSS加一起一个星期基本上就能大概上手,JS难一点但也能很快写一些简单的小效果,在网上随便一搜索各种特效代码随意用,一个新手前端也能在很短 ...
前端工程化、模块化、组件化
工程化前端工程化是一种高层次思想而不是某种技术,所谓前端工程化就是将前端项目当成一项系统工程进行分析.组织和构建从而达到项目结构清晰.分工明确.团队配合默契.开发效率提高的目的.而模块化和组 ...
手把手带你入门前端工程化——超详细教程（高级前端必备）
本文将分成以下 7 个小节: 技术选型统一规范测试部署监控性能优化重构部分小节提供了非常详细的实战教程,让大家动手实践. 另外我还写了一个前端工程化 demo 放在 github 上.这 ...

最新文章

热门文章