模块化初步

js 模块化

CommonJS 是一种使用广泛的 JavaScript 模块化规范，核心思想是通过 require 方法来同步地加载依赖的其他模块，通过 module.exports 导出需要暴露的接口。 CommonJS 规范的流行得益于 Node.js 采用了这种方式，后来这种方式被引入到了网页开发中。

// 导入
const moduleA = require('./moduleA');

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

• 代码可复用于 Node.js 环境下并运行，通过 NPM 发布的很多第三方模块都采用了 CommonJS 规范
• 缺点在于这样的代码无法直接运行在浏览器环境下，必须通过工具转换成标准的 ES5

AMD 也是一种 JavaScript 模块化规范，与 CommonJS 最大的不同在于它采用异步的方式去加载依赖的模块。 AMD 规范主要是为了解决针对浏览器环境的模块化问题，最具代表性的实现是 requirejs。

• 可在不转换代码的情况下直接在浏览器中运行
• 可异步加载依赖
• 可并行加载多个依赖
• 代码可运行在浏览器环境和 Node.js 环境下。

-AMD 的缺点在于JavaScript 运行环境没有原生支持 AMD，需要先导入实现了 AMD 的库后才能正常使用。

ES6 模块化是国际标准化组织 ECMA 提出的 JavaScript 模块化规范。

	// 导入
	import { readFile } from 'fs';
	import React from 'react';
	// 导出
	export function hello() {};
	export default {
	  // ...
	};

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

Babel 是一个广泛使用的转码器。

• 可以将javascript代码（es6，es7）编译成当前浏览器完全支持的语法
• 可以使用基于JavaScript的扩展语言（比如jsx）

//.babelrc 

{
	"presets":["react","env"]
}

css模块化

- 把一些常用的样式片段放进一个通用的文件里，再在另一个文件里通过 @import 语句去导入和使用这些样式片段

CSS预处理器 SCSS LESS

SCSS LESS 是 CSS 预处理器，基本思想是用和 CSS 相似的编程语言写完后再编译成正常的 CSS 文件。

// util.scss 文件

// 定义样式片段
@mixin center {
  // 水平竖直居中
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
}

// main.scss 文件

// 导入和使用 util.scss 中定义的样式片段
@import "util";
#box{
  @include center;
}

##框架

• 框架引入 JSX 语法到 JavaScript 语言层面中，以更灵活地控制视图的渲染逻辑。

	let has = true;
	render(has ? <h1>hello,react</h1> : <div>404</div>);

• Vue 把一个组件相关的 HTML 模版、JavaScript 逻辑代码、CSS 样式代码都写在一个文件里。

<!--HTML 模版-->
<template>
  <div class="example">{{ msg }}</div>
</template>

<!--JavaScript 组件逻辑--> 
<script>
export default {
  data () {
    return {
      msg: 'Hello world!'
    }
  }
}
</script>

<!--CSS 样式-->
<style>
.example {
  font-weight: bold;
}
</style>

构建工具把无法直接运行的源代码转换成发布到线上的可执行 JavaScrip、CSS、HTML 代码.

• 代码转换：TypeScript 编译成 JavaScript、SCSS 编译成 CSS 等
• 文件优化：压缩 JavaScript、CSS、HTML 代码，压缩合并图片等。
• 代码分割：提取多个页面的公共代码、提取首屏不需要执行部分的代码让其异步加载。
• 模块合并：在采用模块化的项目里会有很多个模块和文件，需要构建功能把模块分类合并成一个文件。
• 自动刷新：监听本地源代码的变化，自动重新构建、刷新浏览器。
• 代码校验：在代码被提交到仓库前需要校验代码是否符合规范，以及单元测试是否通过。
• 自动发布：更新完代码后，自动构建出线上发布代码并传输给发布系统。

Webpack 是一个打包模块化 JavaScript 的工具，在 Webpack 里一切文件皆模块，通过 Loader 转换文件，通过 Plugin 注入钩子，最后输出由多个模块组合成的文件。

• webpack.config.js

var path = require('path');

module.exports = {
  mode: 'development',
  entry: './foo.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'foo.bundle.js'
  }
};

项目开发请联系