如何開發Babel 6插件

你用什麼過程來開發Babel 6插件？如何開發Babel 6插件

這就是我想出了開發插件（babel-plugin-test）：

1）在一個空文件夾運行：

npm install babel-cli babel-preset-es2015

2）創建文件src/test.js（測試插件）與只是：

class Person { 
}

3）用下面的內容創建的文件夾node_modules/babel-plugin-test

個

node_modules /巴別-插件測試/的package.json

{ 
    "name": "babel-plugin-test", 
    "version": "0.1.0", 
    "main": "lib/index.js", 
    "dependencies": { 
    "babel-runtime": "^5.0.0" 
    }, 
    "devDependencies": { 
    "babel-helper-plugin-test-runner": "^6.3.13" 
    } 
}

node_modules /巴別-插件測試/ SRC/index.js

export default function ({types: t }) { 
    return { 
    visitor: { 
     ClassDeclaration: function (node, parent) { 
     console.log("XXX"); 
     } 
    } 
    }; 
}

4）創建一個運行的腳本：

node_modules/babel-plugin-test/babel --presets es2015 --out-dir lib src 
babel --plugins babel-plugin-test --presets es2015 --out-dir out src

所以它編譯插件，然後使用該插件編譯test.js，我看到控制檯日誌和輸出文件（在這個例子中我不會改變anythi NG）。

必須有更好的方法來做到這一點。也許有些方法可以使用WebStorm或其他Node調試器來放置斷點並玩弄（至少能夠檢查變量）。

來源

2016-03-09 Manuel

對於基本測試，我使用美妙的astexplorer。只需將解析器設置爲巴比倫6並打開變換並將其設置爲babelv6。然後，您可以將代碼放在一個窗格中，在另一個窗格中查看AST結果，將您的babel插件放在第三個窗格中，並在第四個窗格中查看插件結果。

對於更復雜的測試，我創建了兩個項目，一個用於插件，另一個用於測試插件。我npm鏈接兩者並配置測試項目使用我的插件在babelrc。然後，只要我的插件發生變化，我只需在我的文件/項目上運行babel並查看結果。

林不知道這是最好的方式，但它適用於我。

來源

2016-07-10 08:39:55 yairhaimo

要走的路是在代碼中運行babel，以便您可以獲取轉譯後的代碼並與您期望的進行比較。

首先transpile你的插件像你一樣，那麼在測試文件夾

var transformFileSync = require('babel-core').transformFileSync 
var path = require('path') 
var fs = require('fs') 

var plugin = require('../lib/index').default 
describe('My test', function(){ 
    it ('Transform', function(){ 
    var transformed = transformFileSync(path.join(__dirname, 'testFilePath'), { 
     plugins: [[plugin]] 
    }).code 
    var expectedCode = fs.readFileSync(..) 
    assert.equal(transformed, expected) 
    }) 
})

你可以找到一個例子here。也可以在ES6導入模塊中編寫測試，因爲您需要爲編程提供mocha，例如，請參閱here。

來源

2016-07-23 21:43:27

如何開發Babel 6插件

回答

相關問題