- main.js
import { bar } from "./module1";
import module2 from "./module2";
bar()
module2()
- module1.js
// 多變量導(dǎo)出，導(dǎo)入變量需要變量名一對(duì)一映射
export const module1='module1'
export function bar(params) {
console.log(module1)
}
- module2.js
// 默認(rèn)導(dǎo)出任何數(shù)據(jù)類型，導(dǎo)入變量名可隨機(jī)取名
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命令，使用管道符&&串聯(lián)命令。
先使用babel轉(zhuǎn)換es6語法(名為env的preset)，再使用browserify編譯代碼文章來源地址http://www.zghlxwxcb.cn/news/detail-699193.html
文章來源：http://www.zghlxwxcb.cn/news/detail-699193.html
到了這里，關(guān)于es6---模塊化的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
