-
1 # 堅若頑石
-
2 # 這棵樹再慢慢長大
我們以@babel/core中的transform方法為例
var babel = require("@babel/core");
let code = `var a: string = "";`;
const result = babel.transform(code, {
babelrc: true,
caller: {
name: "my-custom-tool",
supportsStaticESM: true
},
test: function(path, obj) {
return true;
},
filename: "index.js",
// extends: "ajv"
// configFile: "babelrc"
parserOpts: {
plugins: ["typescript"]
},
plugins: [],
presets: []
});
這個配置很重要，因為後面的一些配置檔案是根據這裡的配置定址的，如果這裡不配置，後面的配置檔案可能找不到，我們可能把它當做基礎配置。
前端編譯器babel
配置configFile有兩種情況：
1、如果不配置（configFile!==false）
babel會自動在工程的根目錄下尋找一個babel.config.js檔案，那麼我們就可以在這個檔案中配置
2、如果configFile是一個字串，字串會被當做包名，那麼babel就會在程序執行目錄下尋找這個包，這個包就可以當做配置。
使用pkgjson的前提是在基礎配置中設定filename屬性，因為babel是以filename所在目錄一層層向上尋找pkgjson的，找到的第一個pkgjson就被用來當做配置（和node尋找node_modules一樣）。
我們可以在pkgjson中設定babel欄位屬性，在這個屬性中我們可以設定babel的配置。
babel在定址pkgjson檔案時會記錄向上尋找的每一個層級目錄（直到找pkgjson那一層），那麼在這些層級目錄中可以配置.babelrc和.babelrc.js檔案
有三點需要注意：
1、每一層只能配置一個檔案，兩個都配置會報錯，會讓你移除一個
2、只會使用定址到的第一個配置檔案，其他的就會被忽略
3、上面的pkgjson中的配置和這裡的配置也是二選一，否則也會報錯
另外在每個層級下還可以配置.babelignore，和上面一樣只取定址到的第一個
上面每個配置檔案都可以設定env和overrides兩個屬性
babel可以根據執行環境env配置
module.exports = function(cache) {
let env = cache.env;
env();
return {
presets: ["@babel/env"],
plugins: [
["@babel/transform-react-jsx", {
a: 1
}, "test"],
["@babel/ala", {
b: 2
}]
],
passPerPreset: true
env : {
development: {
presets: [],
plugins: []
},
production: {
presets: [],
plugins: []
}
},
overrides: []
};
}
也可以在overrides中配置，這個屬性是個陣列，陣列每個元素中又可以配置env。
總結
babel執行的時候會把上面每個配置都走一遍，最終會把尋找到的所有配置合在一起！
-
3 # 使用者2868149999410
習慣了WebStorm的話..我就假設題主會用
Node.js
和npm啦～一句話總結：用WebStorm自帶的File Watcher功能+Babel實現自動轉換ECMAScript 6程式碼為ES5程式碼
我是這麼配置的..就先新建一個Empty Project，然後在src目錄下新建了一個main.js；
// 這一步不是必須的 只是剛上手的話 從空專案開始自己配置會少很多幹擾
Then..進入設定，把JavaScript language version改成ECMAScript 6；
再Then..寫一段ES6程式碼
"use strict";
// node直接執行ES6程式碼時，如使用了ES6的一些關鍵字，比如let，就需要嚴格模式，否則會報錯
// 這是沒有嚴格模式時候的錯誤提示
// SyntaxError: Block-scoped declarations (let, const, function, class) not yet supported outside strict mode
function* fibs() {// Generator Function
let a = 0;
let b = 1;
while (true) {
yield a;
// [a, b] = [b, a + b];
b = a + b;
a = b - a;
}
}
let [first, second, third, fourth, fifth, sixth] = fibs();
console.log(first, second, third, fourth, fifth, sixth);
現在IDE會出現一個File watcher提示條
先別點Add watcher！我們要先去裝babel～
首先在根目錄新建一個
package.json
{
"name": "test-project",
"version": "1.0.0"
}
然後開啟IDE的Terminal，安裝babel-cli
npm install --save-dev babel-cli
Good! 現在可以去點Add watcher啦，點完之後會彈出一個框，其中大部分設定IDE都幫你搞定了
下面第三行，Program那一項，填
$ProjectFileDir$/node_modules/
.bin/babel
然後點OK，這個時候你就會發現左邊多出來一個main-
compiled.js
檔案啦但是還沒搞定！現在只是搞定了自動轉換的功能，系統預設把ES6 compile成了ES6..（你應該會發現compile出來的東西跟原來的一樣
..Generator
函式並沒有被轉換成ES5的格式）所以我們需要安裝Babel的preset以正確識別ES6程式碼；
和剛才一樣，在npm安裝babel的ES6的preset
npm install --save-dev babel-preset-es2015
在根目錄下新建一個
.babelrc
檔案（就是babel在當前專案的配置檔案），寫上{
"presets": [
"es2015"
]
}
OK搞定！儲存再回去看一下main-
compiled.js
應該就變成這個樣子啦，現在你在main.js
裡直接寫ES6程式碼，IDE都會自動compile成ES5的程式碼在這裡啦～注意：想直接用
Node.js
執行ES6程式碼還是有些問題..因為這段程式碼用的ES6的解構賦值Node.js
還未完全支援，需要在執行的時候加入一些tags（以開啟Node.js
的相關試驗特性），具體可以參考Node.js
官網對ES6的說明：ECMAScript 2015 (ES6)。
回覆列表
在使用babel之前，我們一般需要設定一些配置，那麼babel有哪些地方可以設定配置呢？
我們以@babel/core中的transform方法為例
var babel = require("@babel/core");
let code = `var a: string = "";`;
const result = babel.transform(code, {
babelrc: true,
caller: {
name: "my-custom-tool",
supportsStaticESM: true
},
test: function(path, obj) {
return true;
},
filename: "index.js",
// extends: "ajv"
// configFile: "babelrc"
parserOpts: {
plugins: ["typescript"]
},
plugins: [],
presets: []
});
這個配置很重要，因為後面的一些配置檔案是根據這裡的配置定址的，如果這裡不配置，後面的配置檔案可能找不到，我們可能把它當做基礎配置。
前端編譯器babel
配置configFile有兩種情況：
1、如果不配置（configFile!==false）
babel會自動在工程的根目錄下尋找一個babel.config.js檔案，那麼我們就可以在這個檔案中配置
2、如果configFile是一個字串，字串會被當做包名，那麼babel就會在程序執行目錄下尋找這個包，這個包就可以當做配置。
使用pkgjson的前提是在基礎配置中設定filename屬性，因為babel是以filename所在目錄一層層向上尋找pkgjson的，找到的第一個pkgjson就被用來當做配置（和node尋找node_modules一樣）。
我們可以在pkgjson中設定babel欄位屬性，在這個屬性中我們可以設定babel的配置。
babel在定址pkgjson檔案時會記錄向上尋找的每一個層級目錄（直到找pkgjson那一層），那麼在這些層級目錄中可以配置.babelrc和.babelrc.js檔案
有三點需要注意：
1、每一層只能配置一個檔案，兩個都配置會報錯，會讓你移除一個
2、只會使用定址到的第一個配置檔案，其他的就會被忽略
3、上面的pkgjson中的配置和這裡的配置也是二選一，否則也會報錯
另外在每個層級下還可以配置.babelignore，和上面一樣只取定址到的第一個
上面每個配置檔案都可以設定env和overrides兩個屬性
babel可以根據執行環境env配置
module.exports = function(cache) {
let env = cache.env;
env();
return {
presets: ["@babel/env"],
plugins: [
["@babel/transform-react-jsx", {
a: 1
}, "test"],
["@babel/ala", {
b: 2
}]
],
passPerPreset: true
env : {
development: {
presets: [],
plugins: []
},
production: {
presets: [],
plugins: []
}
},
overrides: []
};
}
也可以在overrides中配置，這個屬性是個陣列，陣列每個元素中又可以配置env。
總結
babel執行的時候會把上面每個配置都走一遍，最終會把尋找到的所有配置合在一起！