ES6 模块化如何使用，开发环境如何打包

模块化的基本语法

export、import 语法

 

CommonJS规范：代表是 node.js

AMD规范:异步模块定义( Asynchronous  Module  Definition)，代表是RequireJS

CMD规范： 按需加载 ，代表是sea.js

 

 

开发环境配置

开发环境 -- babel

babel输出浏览器兼容的 JavaScript 代码

• 电脑有 node 环境，运行 npm init
• npm install --save-dev babel-core babel-preset-es2015 babel-preset-lates
• 创建 .babelrc 文件
• 全局安装 npm install --global babel-cli
• 查看babel版本babel —version
• 创建 index.js
• 内容：[1, 2, 3].map(item => item + 1);
• 运行 babel index.js
• 运行 babel index.js

开发环境 - webpack

• npm install webpack babel-loader --save-dev
• 配置 webpack.config.js
• 配置 package.json 中的 scripts
• 运行 npm start

 

开发环境 - rollup

Rollup 是一个 JavaScript 模块打包器，可以将小块代码编译成大块复杂的代码，它对代码模块使用新的标准化格式。

• npm init
• npm i rollup rollup-plugin-node-resolve rollup-plugin-babel babel-plugin-external-helpers babel-preset-latest --save-dev
• 配置 .babelrc
• 配置 rollup.config.js
• 将 webpack 环境的 JS 代码拷贝过来
• 修改 package.json 的 scripts
• 运行 npm start

rollup VS  webpack

rollup 功能单一【工具要尽量功能单一，可集成，可扩展】，

webpack 功能强大

 

 babel 编译 ES6 语法，模块化可用 webpack 和 rollup