详解ES6模块化

最新推荐文章于 2024-08-28 09:45:00 发布

xyphf_和派孔明

最新推荐文章于 2024-08-28 09:45:00 发布

阅读量204

点赞数

分类专栏： Web前端面试

本文链接：https://blog.youkuaiyun.com/xyphf/article/details/115266088

版权

Web前端面试专栏收录该内容

24 篇文章

订阅专栏

这篇博客介绍了如何通过npm初始化项目，配置.babelrc文件，安装并使用babel-cli和babel-preset-es2015来将ES6模块代码转换为ES5兼容的代码，以便于在不支持ES6的环境中运行。示例代码展示了两种导出和导入模块的方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

参考博文

第一步：初始化项目，使得能被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"
  }
}