前端JS进阶一（ES6-模块化）

模块化语法

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