強制Browserify轉換依賴關係？

Question

我正在處理兩個Node包，我們稱之爲Library和Consumer。庫負責在瀏覽器中渲染一堆東西。所有消費者都是import Library from 'library'，並致電Library(someConfigHere) - 這基本上只是一個測試，以確保庫正在做我所期望的瀏覽器。

我已將npm link ed庫轉換爲Consumer，並且試圖在Consumer上運行Browserify，但出現此錯誤：ParseError: 'import' and 'export' may appear only with 'sourceType: module'。庫確實包含ES6 export聲明，所以我猜測Browserify僅針對消費者而不是庫運行。

所以我的問題是：有沒有辦法強制Browserify轉換依賴關係以及？

這是我package.json：

{ 
    "name": "consumer", 
    "version": "1.0.0", 
    "description": "", 
    "main": "index.js", 
    "scripts": { 
    "start": "budo index.js --port $PORT", 
    "test": "echo \"Error: no test specified\" && exit 1" 
    }, 
    "author": "", 
    "license": "ISC", 
    "devDependencies": { 
    "babel-preset-es2015": "^6.13.2", 
    "babel-preset-react": "^6.11.1", 
    "babelify": "^7.3.0", 
    "browserify-shim": "^3.8.12" 
    }, 
    "browserify": { 
    "transform": [ 
     "babelify" 
    ] 
    }, 
    "babel": { 
    "presets": [ 
     "es2015", 
     "react" 
    ] 
    } 
} 

這是消費者的index.js：

import Library from 'library' // <= this is what isn't getting babelified 

console.log(Library); 

這是圖書館的index.js：

export default (config) => { 
    console.log('Testing testing') 
} 

Answer 1

Browserify變換可以被配置爲全球性的，這意味着他們將會是ap也在node_modules之內的文件。

該配置是按變換的。隨着babelify，你配置它是這樣的：

browserify().transform("babelify", { 
    global: true 
}) 

或者，如果您使用的是命令行，像這樣：

browserify ... -t [ babelify --global ] ... 

或者，它在package.json配置，它應該是這樣的（注意加方括號）：

"browserify": { 
    "transform": [ 
    ["babelify", { "global": true }] 
    ] 
} 

Babelify也實現了ignore選項，因此可以將其配置爲只轉換您想要的node_modules中的文件。有更多的信息here。

另一種解決方案是在library模塊的package.json中包含類似的browserify/babelify配置。處理依賴關係時，Browserify將檢查所有依賴關係的文件以進行轉換，並應用任何已配置的文件。