《webpack学习》- 基本概念

2021-08-03  本文已影响0人  张中华

模块化

模块化是将一个复杂的系统分解为多个模块以方便编码。
以前开发通过命名空间的方式来组织代码,例如JQuery,放在window.$下,但是存在一些缺点:

CommonJS

CommonJS(http://www.commonjs.org)是一种广泛使用的JS模块化规范,使用方式如下:

// 导入
const moduleA = requre(./moduleA);

// 导出
module.exports = moduleA.someFunc;

优点:

缺点:
 * 无法直接在浏览器环境下运行,必须通过工具转换成ES5

AMD

也是一种JS模块化规范,与CommonJS不同在于,它采用了异步的方式去加载依赖的模块。

// 定义一个模块
define('module', ['dep'], function(dep){
  return exports;
});
// 导入和使用
require(['module'], funciton(module){
});

优点:

ES6 模块化

它在语言层面上实现了模块化。浏览器厂商和Node.js都宣布要原生支持该规范,它将逐渐取代CommonJS和AMD规范,成为浏览器和拂去起通用的模块解决方案。

// 导入
import { readFile } from 'fs';
import React from 'react';

// 导出
export function hello() {};
export default {
// ...
};

缺点:
目前无法直接运行在大部分JS环境下,必须通过工具转换成标准的ES5后才能正常运行。

样式中的模块化

除了JS开始进行模块化改造,前端开发里的样式文件也支持模块化,例如SCSS、LESS等。

新框架

React、Vue、Angular

新语言

常见构建工具

构建工具的功能:

常见构建工具:

上一篇下一篇

猜你喜欢

热点阅读