- 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编译代码文章来源地址https://www.toymoban.com/news/detail-699193.html
文章来源：https://www.toymoban.com/news/detail-699193.html
到了这里，关于es6---模块化的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
