es6---模块化

  1. main.js
javascript 复制代码
import { bar } from "./module1";
import module2 from "./module2";
bar()
module2()
  1. module1.js
javascript 复制代码
// 多变量导出,导入变量需要变量名一对一映射
export const module1='module1'
export function bar(params) {
    console.log(module1)
}
  1. module2.js
javascript 复制代码
// 默认导出任何数据类型,导入变量名可随机取名
export default function bar(){
    console.log('bar module2');
}
  1. package.json 和babel.config.json
javascript 复制代码
{
  "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"
        }
      ]
    ]
  }
  1. index.html中使用编译之后的js
javascript 复制代码
<!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编译代码

相关推荐
heartmoonq9 分钟前
npm 包抽象封装并发布完整指南
前端
红衣信9 分钟前
深入剖析 hooks-todos 项目:前端开发的实用实践
前端·react.js·面试
今禾9 分钟前
深入理解 JavaScript 事件监听机制
前端·javascript
FogLetter9 分钟前
从饼干到Cookie:前端存储的身份密码本
前端·javascript
Spider_Man13 分钟前
🎭 React受控与非受控组件:一场"控制权"的争夺战
前端·react.js
Mintopia18 分钟前
LOD:图形世界里的 “看人下菜碟” 艺术
前端·javascript·计算机图形学
黑客老李20 分钟前
EDUSRC:智慧校园通用漏洞挖掘(涉校园解决方案商)
服务器·前端·网络·安全·web安全
拾光拾趣录22 分钟前
Vue依赖收集机制:响应式原理的核心实现
前端·vue.js
Mintopia22 分钟前
Three.js ArrowHelper:三维世界里的 “方向向导”
前端·javascript·three.js
归于尽24 分钟前
浏览器和 Node.js 的 EventLoop,原来差别这么大
前端·node.js·浏览器