巴貝爾轉換路徑JSX

我使用通天transpile一些ES2015代碼ES5，像這樣JS：巴貝爾轉換路徑JSX

"scripts": { 
    "build:lib": "babel src --out-dir lib --presets=react,es2015,stage-0", 
    "clean": "rimraf lib dist coverage", 
    "prepublish": "npm run clean && npm run build:lib" 
}

據其轉換罰款ES5。問題在於，babel並沒有改變文件之間的路徑。它將文件的擴展名從.jsx更改爲.js，但在文件內部，它仍將該文件引用爲.jsx。

爲了簡化它，文件夾結構如下所示。巴貝爾已經改變了.jsx文件的擴展名：

- index.js 
- Component.js

雖然裏面index.js，也算保持.jsx擴展：

require('./Component.jsx');

我這麼想嗎？有一個更好的方法嗎？感謝您的幫助:)

來源

2016-11-08 Alberto Centelles

爲什麼不簡單地使用Webpack呢？這是有原因的嗎？特別是你也缺少設置node_env生產，所以它會避免添加proptyyping等

es3ify只是用於更改代碼，而你正試圖建立一個庫。你需要像Webpack這樣的樹木構建器來獲得類似的東西（es3ify如何知道彼此之間的引用？）

所以tl; dr有一個更好的解決方案：使用Webpack。

module.exports = { 
    devtool: 'source-map', 

    entry: [ 
    path.join(__dirname, '/src/index.jsx') 
    ], 

    output: { 
    path: path.join(__dirname, '/dist'), 
    filename: 'bundle.js', 
    publicPath: '/' 
    }, 

    resolve: { 
    extensions: ['', '.js', '.jsx'] 
    }, 

    module: { 
    loaders: [ 
     { 
     test: /\.jsx?$/, 
     exclude: /node_modules/, 
     loader: 'babel' 
     } 
    ] 
    }, 

    plugins: [ 
    new webpack.DefinePlugin({ 
     'process.env': { 
     NODE_ENV: JSON.stringify(process.env.NODE_ENV) 
     } 
    }), 
    new webpack.optimize.UglifyJsPlugin({ 
     compressor: { 
     warnings: false 
     } 
    }) 
    ] 
};

來源

2016-11-08 14:11:32 Shiroo

Webpack增加了很多我不需要的東西。我發現它是有用的，但在這種情況下，我只是想要相同的文件夾結構，但在ES5中，我得到它很好，與上面提到的問題。你將如何在Webpack中做到這一點？ –

你可以自己決定你想在那邊做些什麼。我可以告訴你，你可以做同樣的事情，就像你在Webpack中所做的那樣。我將編輯答案併發布webpack配置示例 – Shiroo

Ofcourse它將創建一個包而不僅僅是已翻譯的文件。儘管webpack還爲您提供了額外的adhoc posibilites，例如COmpressionPlugin或Deduping，或者甚至更好的樹抖動元素（如果您沒有使用stage-0 ofcourse，但單手選擇插件以避免轉換爲CommonJS）。 – Shiroo

正如Shiroo建議的那樣，我最終爲此使用了webpack。這裏的關鍵概念是理解解析器的作用。儘管明確有它加載內https://webpack.github.io/docs/resolving.html

resolve: { 
    root: path.resolve('./src'), 
    extensions: ['', '.js', '.jsx'] 
    }

後來，我遇到了所有的node_modules也包括在捆綁，：

module: { 
    loaders: [ 
     { 
     test: /(\.jsx|\.js)$/, 
     include: path.resolve('./src'), 
     exclude: /node_modules/, 
     loader: 'babel' 
     } 
    ] 
    }

這個問題，他們是真正在的WebPack文檔很好地解釋這裏有更好的解釋https://stackoverflow.com/a/35820388/4929834

來源

2016-11-09 07:55:20

巴貝爾轉換路徑JSX

回答

相關問題