バーベル実習
ES 6モジュール構文
基本構文
exprot
他のファイルからインポートする変数または関数の前に、キーワード
export
を追加します.export 변수, 함수
import
export
ファイルの変数または関数は、import
として呼び出すことができる.import { 불러올 변수 또는 함수 이름 } from '파일 경로';
基本例
export
/* math.js */
export var pi = 3.14;
import
/* app.js */
import { pi } from "./math.js";
console.log(pi); // 3.14
バーベル
バーベルは、主にECMAScript 2015+コードを現在および過去のブラウザ環境と互換性のあるバージョンに変換するためのツールです.
バベル公式サイト:https://babeljs.io/
次世代JavaScript
const sum = (a, b) => a + b;
ブラウザ間でのJavaScript変換
var sum = function (a, b) {
return a + b;
};
バーベルの練習
ラベルパッケージタイプ
プラグインパッケージ名Babelプラグイン@babel/core@babel/prefect-envWebpackプラグインbabel-loader
パッケージのインストール結果
/* package.json */
{
"name": "exercise",
"version": "1.0.0",
"description": "",
"main": "webpack.config.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"@babel/core": "^7.2.2",
"@babel/preset-env": "^7.2.0",
"babel-loader": "^8.0.4",
"webpack": "^4.27.1",
"webpack-cli": "^3.1.2"
}
}
設定の切り替え
/* webpack.config.js */
module.exports = {
mode: "production",
mode: "none",
entry: "./js/app.js",
output: {
path: path.resolve(__dirname, "build"),
filename: "main.bundle.js",
},
module: {
rules: [
{
test: /\.m?js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: "babel-loader",
options: {
presets: ["@babel/preset-env"],
},
},
},
],
},
stats: {
colors: true,
},
devtool: "source-map",
};
ソースマッピング
バインディング設定では、
devtool: 'source-map'
は、デプロイのために構築されるファイルをソースファイルに関連付けるツールであり、バインディング(圧縮、復号)ではなく、デプロイ後のデバッグ中にソースファイルを簡単に表示できます.この設定を追加すると、構築成果物フォルダに拡張子
.map
が追加されます.Reference
この問題について(バーベル実習), 我々は、より多くの情報をここで見つけました https://velog.io/@me2designer/바벨babel-실습テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol