web前端开发之webpack打包

2024-07-09 20:24| 来源: 网络整理| 查看: 265

前端工程化一、模块化 1.1 服务器端模块化规范

CommonJS

模块分为单文件模块与包模块成员导出：module.exports和exports模块成员导入：require (‘模块标识符’)

例：

a.js

let a = 10 let b = 20 module.exports = { a,b }

b.js

const a = require('./a.js') console.log(a) 1.2 ES6模块化

ES Module把一个文件当作一个模块，每个模块有自己的独立作用域，那如何把每个模块联系起来呢？

核心点就是模块的导入（import）与导出（export）。

1.2.1 module.exports

如上代码我们把它改造成ES6格式

let a = 10 let b = 20 export default { a,b }

b.js

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

注意

浏览器默认不支持ES6的import 我们需要使用npm init -y命令初始化在package.json文件中新增配置 “type”: “module” 即可 1.2.2 按需导入导出(export)

a.js

export let a = 10

b.js

import {a} from './a.js' console.log(a) 1.2.3 直接执行模块代码

a.js

for (let i = 0; i

【本文地址】

今日新闻