详解ES6模块化

参考博文

第一步：初始化项目，使得能被npm管理

npm init -y

第二步：配置.babelrc

Babel提供babel-cli工具,用于命令行转码。它的安装命令如下：

npm install --global babel-cli

// 查看是否安装成功
babel --version

安装转码器

npm install --save-dev babel-preset-es2015

 

{
    "presets": ["es2015"],
    "plugins": []
}

第三步：定义运行脚本

package.json增加"build-m"

作用是将modularization/src目录下编译输出到modularization/dist目录下

{

    "script": {
        "build": "babel modularization/src -d modularization/dist"
    }

}

下面贴上全部源码

方式一

userApi.js

export function getList(){
    console.log('显示用户列表')
}

export function save(){
    console.log('保存用户数据')
}

userComponent.js

import {getList} from "./userApi.js"

getList()

方式二

userApi2.js

export default{
    getList(){
        console.log('显示用户列表')
    },
    save() {
        console.log('保存用户数据')
    }
}

userComponent2.js

import user from "./userApi2.js"

user.getList()
user.save()

.babelrc

{
    "presets": ["es2015"],
    "plugins": []
}

package.json

{
  "name": "es6-module-demo2",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "babel modularization/src -d modularization/dist"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-preset-es2015": "^6.24.1"
  }
}