模塊化語法

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的開發(fā)環(huán)境

• 電腦有 node 環(huán)境，運行 npm init
• npm install --save-dev babel-core babel-preset-es2015 babel-preset-latest
• 創(chuàng)建 .babelrc 文件
• npm install --global babel-cli （需要管理員權限）
• babel —version
• 創(chuàng)建 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的開發(fā)環(huán)境

• 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的開發(fā)環(huán)境

• npm init
• npm i rollup rollup-plugin-node-resolve rollup-plugin-babel babel-plugin-external-helpers babel-pres
• 配置 .babelrc
• 配置 rollup.config.js
• 將 webpack 環(huán)境的 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）
• 前端打包工具出現(xiàn)， nodejs 模塊化可以被使用（CommonJS）
• ES6 出現(xiàn)，想統(tǒng)一現(xiàn)在所有模塊化標準。nodejs 積極支持，瀏覽器尚未統(tǒng)一。

總結

• 語法：import export（注意有無default）
• 環(huán)境：babel編譯ES6語法，模塊化用webpack和rollup