與WebPack使用babel transpiler的麻煩

我試圖在我的應用程序中使用this包。與WebPack使用babel transpiler的麻煩

它似乎寫在ES6所以我需要一個像babel的轉譯。我已經開始一個新項目，並嘗試以下內容：

創建新的索引.html/.js文件進行測試。
npm install audio-effects
npm install gulp gulp-babel babel-preset-es2015
創建.babelrc

試圖從dist文件夾python -m SimpleHTTPServer運行此之後，我得到了一個錯誤：index.js:3 Uncaught ReferenceError: require is not defined。

經過一番挖掘，這是因爲require can't be used client-side。所以接下來我使用WebPack來讓我使用require。

我走進我的dist文件夾（其中我transpiled JavaScript是），跑：

webpack ./index.js index.js

但現在我得到錯誤index.js:78 Uncaught SyntaxError: Unexpected token import。

任何人都可以看到我失蹤（除了NPM-ES6-Gulp-WebPack教程）嗎？我似乎陷入了WebPack和Transpiling的循環。

的index.html

<!DOCTYPE html> 
<html> 
<body> 

<h4>Welcome</h4> 

<button onclick="startAudio()">Start Audio</button> 

<script src="js/index.js"></script> 
<script type="text/javascript" src="bundle.js" charset="utf-8"></script> 

</body> 
</html>

index.js（預通天塔/的WebPack - ification）

import {HasAudioContext} from 'audio-effects'; 

function startAudio() { 
    console.log("Start Audio..."); 

    let audioContext = null; 
    if (HasAudioContext) { 
     console.log("Has Audio CTX"); 
     audioContext = new AudioContext(); 
    } 
    else { 
     console.log("No Audio CTX"); 
    } 
}

gulpfile.js

var gulp = require("gulp"); 
var babel = require("gulp-babel"); 

gulp.task("default", function() { 
    return gulp.src("src/app.js") 
    .pipe(babel()) 
    .pipe(gulp.dest("dist")); 
});

來源

2016-08-01 TomSelleck

那麼，webpack需要一個babel-loader來讀取ES6。你有包括嗎？另一種選擇，或許更好，可以使用Gulp和Browserify，它還可以讓你在瀏覽器中需要模塊。這樣你就不需要涉及webpack。 – tomtom

這對我來說是全新的，你有沒有得到一個很好的資源如何一起使用gulp/browserify？謝謝回覆！ – TomSelleck

https://www.google.com/webhp?sourceid=chrome-instant&ion=1&espv=2&ie=UTF-8#q=webpack%20babel%20tutorial –

我做了一些改動庫（我是包的原始作者）。使用npm安裝軟件包時，您現在可以獲得經過轉換的ES5代碼而不是ES6源代碼。你仍然需要webpack，browserify，...來加載模塊。

這可能會修復Uncaught SyntaxError: Unexpected token import錯誤，因此請將您的audio-effects庫更新爲最新版本。

也應該解決Jorawar Singh回答中提到的錯誤進口問題。

我還在圖書館工作，所以如果遇到任何問題，請隨時在github上創建問題或提出請求。

我個人使用webpack包。這是我的webpack.config.babel.js文件（刪除評論）。注意：如果您未將react參數設置爲false，我正在使用反應。

import config from 'madewithlove-webpack-config'; 

export default config({ 
    react: true, 
    sourcePath: 'src', // Source directory 
    outputPath: 'builds', // Transpiled coded directory 
});

這從https://github.com/madewithlove/webpack-config/

進口基本的WebPack配置由於我在ES6編寫代碼，我與巴貝爾transpiling它，我.babelrc文件看起來像這樣：

{ 
    "presets": ["es2015", "stage-0"], 
}

通過這些設置，您可以使用webpack-dev-server --inline --hot運行webpack。

您不必使用madewitlove webpack config，但它需要一些標準設置的關懷如編譯SCSS等

我希望這給你如何使用audio-effects包或任何其他ES6封裝的洞察力。

來源

2016-08-02 10:49:27 Sambego

清楚我的理解有一些與這個庫的問題它被寫入es6，當你做導入，並想與webpack編譯成es5時，webpack也將bummbel所有您需要的模塊。這裏是我的webpack.config看看喜歡運行

var webpack = require('webpack'); 
var config = { 
    entry: './index.js', 
    output: { 
    path: __dirname + '/dist', 
    filename: 'bundle.js' 
    }, 
    module: { 
    loaders: [ { 
     test: /\.js$/, 
     loader: 'babel-loader', 
     query: { 
      presets: ['es2015'] 
     } 
    }] 
    } 
}; 

module.exports = config;

通過的WebPack將編譯庫和index.js文件到bundle.js

有一些其他的問題，我認爲，爲了得到這個庫，你需要在圖書館做一些小的改變。從

'./Helpers/HasAudioContext'; //this doesn't exist and 
               //webpack will give you compile error

到

'./helpers/hasAudioContext';

我有一個問題whitch我解決不了是我無法運行startAudio功能，但通過index.js我可以（weard讓我知道你會發現爲什麼）在你的索引中。JS

document.getElementById("btn").addEventListener("click", startAudio);

仍存在一些問題，巫婆我想解決，也有一些問題與庫巫婆需要解決

來源

2016-08-01 21:16:51

與WebPack使用babel transpiler的麻煩

回答

相關問題