模块化语法
export语法
/*util1.js*/
export default{
a:100
}
/*util2.js*/
export function fn1(){
alert('fn1')
}
export function fn2(){
alert('fn2')
}
import语法
/*index.js*/
import util1 from './util1.js'
import {fn1,fn2} from './util2.js'
console.log(util1)
fn1
fn2
模块化-babel
Babel 通过语法转换来支持最新版本的 JavaScript （ES6），而不用等待浏览器的支持。
配置babel的开发环境
- 电脑有 node 环境，运行 npm init
- npm install --save-dev babel-core babel-preset-es2015 babel-preset-latest
- 创建 .babelrc 文件
- npm install --global babel-cli （需要管理员权限）
- babel —version
- 创建 index.js
- 内容：[1, 2, 3].map(item => item + 1);
- 运行 babel index.js
//.babelrc 本质是个json
{
"presets":["es2015","latest"]
"plugins":[]
}
//index.js
[1, 2, 3].map(item => item + 1);
配置webpack的开发环境
- npm install webpack babel-loader --save-dev
- 配置 webpack.config.js
- 配置 package.json 中的 scripts
- 运行 npm start
//webpack.config.js
module.exports = {
entry: './src/index.js', //入口
output: { //出口
path: __dirname, //当前目录
filename: './build/bundle.js' //编译出的文件
},
module: { //定义模块
rules: [{
test: /\.js?$/, //所有的.js结尾的
exclude: /(node_modules)/, //除了node_modules目录
loader: 'babel-loader' //通过babel-loader来编译
}]
}
}
//package.json
"scripts": {
"start": "webpack",
"test": "echo \"Error: no test specified\" && exit 1"
}
rollup
配置rollup的开发环境
- npm init
- npm i rollup rollup-plugin-node-resolve rollup-plugin-babel babel-plugin-external-helpers babel-pres
- 配置 .babelrc
- 配置 rollup.config.js
- 将 webpack 环境的 JS 代码拷贝过来
- 修改 package.json 的 scripts
- 运行 npm start
rollup特点
- rollup 功能单一，webpack 功能强大
- 参考设计原则和《Linux/Unix设计思想》
- 功能单一，可集成，可扩展
//.babelrc
{
"presets": [
["latest", {
"es2015": {
"modules": false //不打包第三方插件
}
}]
],
"plugins": ["external-helpers", "babel-plugin-transform-regenerator"]
}
//rollup.config.js
import babel from 'rollup-plugin-babel'
import resolve from 'rollup-plugin-node-resolve'
export default {
entry: 'src/index.js', //入口
format: 'umd', //umd兼容AMD和CommonJS
plugins: [
resolve(),
babel({
exclude: 'node_modules/**' //排除node_modules
})
],
dest: 'build/bundle.js' //打包目录
}
//package.json
"scripts": {
"start": "rollup -c rollup.config.js"
},
关于JS众多模块化标准
- 没有模块化
- AMD 成为标准，require.js （也有 CMD）
- 前端打包工具出现， nodejs 模块化可以被使用（CommonJS）
- ES6 出现，想统一现在所有模块化标准。nodejs 积极支持，浏览器尚未统一。
总结
- 语法：import export（注意有无default）
- 环境：babel编译ES6语法，模块化用webpack和rollup
