es6---模块化-CSDN博客

本文链接：https://blog.csdn.net/aliven1/article/details/132736274

文章介绍了如何在JavaScript项目中使用ES6模块系统，通过`main.js`的导入和导出，配合`package.json`和`.babelrc`文件，利用Babel的preset-env进行跨浏览器兼容性转换。编译过程涉及`babeljs--out-dirlib&&browserifye./lib/main.js-o./dist/bundle.js`命令。

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

main.js

import { bar } from "./module1";
import module2 from "./module2";
bar()
module2()

module1.js

// 多变量导出，导入变量需要变量名一对一映射
export const module1='module1'
export function bar(params) {
    console.log(module1)
}

module2.js

// 默认导出任何数据类型，导入变量名可随机取名
export default function bar(){
    console.log('bar module2');
}

package.json 和babel.config.json

{
  "name": "es6",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "scripts": {
    "compile": "babel js --out-dir lib && browserify -e ./lib/main.js -o ./dist/boundle.js"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/cli": "^7.22.15",
    "@babel/core": "^7.22.15",
    "@babel/preset-env": "^7.22.15"
  }
}

{
    "presets": [
      [
        "@babel/preset-env",
        {
          "targets": {
            "edge": "17",
            "firefox": "60",
            "chrome": "67",
            "safari": "11.1"
          },
          "useBuiltIns": "usage",
          "corejs": "3.6.5"
        }
      ]
    ]
  }

index.html中使用编译之后的js

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>es6</title>
</head>
<body>
    
</body>
<script src="./dist/boundle.js"></script>
</html>

note:

babel js --out-dir lib && browserify -e ./lib/main.js -o
./dist/boundle.js script中的compile命令，使用管道符&&串联命令。
先使用babel转换es6语法(名为env的preset)，再使用browserify编译代码