Webpack不能將ES6轉換成ES5

我對Webpack非常陌生。我認爲我做錯了。我想使用babel將ES6功能轉換爲ES5功能。所以我做了一些研究，發現了babel-loader。但是，我不確定我在做什麼。Webpack不能將ES6轉換成ES5

我跑NPM安裝通天裝載機--save-dev的，它得到了加入到我的package.json

//的package.json

{ 
    "name": "kanban", 
    "version": "1.0.0", 
    "description": "kanban", 
    "main": "index.js", 
    "scripts": { 
    "test": "echo \"Error: no test specified\" && exit 1" 
    }, 
    "author": "", 
    "license": "ISC", 
    "devDependencies": { 
    "babel-core": "^6.3.21", 
    "babel-loader": "^6.2.0", 
    "html-webpack-plugin": "^1.7.0", 
    "json-loader": "^0.5.4", 
    "webpack": "^1.12.9" 
    } 
}

// webpack.config.js

var path = require('path'); 
var HtmlwebpackPlugin = require('html-webpack-plugin'); 

const PATHS = { 
    app: path.join(__dirname, 'app'), 
    build: path.join(__dirname, 'build') 
}; 

module.exports = { 
    entry: PATHS.app, 
    output: { 
    path: PATHS.build, 
    filename: 'bundle.js' 
    }, 
    plugins: [ 
    new HtmlwebpackPlugin({ 
     title: 'Kanban app' 
    }) 
    ], 
    module: { 
    loaders: [ 
     { test: /\.js$/, loader: 'babel-loader' } 
    ] 
    } 
};

// app/index.js - 我只是在ES6語法中添加了一些隨機無用的函數。我希望能在我的bundle.js文件中看到ES5格式，但它沒有改變。它仍然在bundle.js

var component = require('./component'); 
var app = document.createElement('div'); 
document.body.appendChild('app'); 
app.appendChild(component()); 

let myJson = { 
    prop: 'myProp' 
}; 

let fives = []; 
nums = [1, 2, 5, 15, 25, 32]; 

// Statement bodies 
nums.forEach(function (v) { 
    if (v % 5 === 0) { 
    fives.push(v); 
    } 
}, this); 

console.log(fives); 

let sum = (a, b) => a + b;

ES6語法//應用程序/ component.js

module.exports = function() { 
    var element = document.createElement('h1'); 
    element.innerHTML = 'hello world'; 
    return element; 
};

來源

2015-12-21 devwannabe

你期望什麼它會呢？您必須在控制檯或任務運行器中使用babel編譯腳本（grunt，gulp，...）。 https://babeljs.io/docs/usage/cli/ – Ludo

非常感謝。我認爲Webpack會通過babel-loader爲我做到這一點。 – devwannabe

我想要發生的事情是Webpack調用babel並儘可能不使用咕嚕聲或吞嚥 – devwannabe

如果你想編譯器ES6到ES5您需要安裝通天ES2015 preset。

npm install babel-preset-es2015

然後您需要啓用此預設。啓用此ES6到ES5編譯的方法是使用babel-loader查詢字符串：

module: { 
    loaders: [ 
     { 
     test: /\.js$/, 
     loader: 'babel-loader?presets[]=es2015' 
     } 
    ] 
    }

或查詢選項：

module: { 
    loaders: [ 
     { 
     test: /\.js$/, 
     loader: 'babel-loader', 
     query: { 
      presets: ['es2015'] 
     } 
     } 
    ] 
    }

來源

2015-12-21 21:53:49 dreyescat

非常感謝！我一回到家就會嘗試。我不斷從網絡斷開連接。 – devwannabe

它的工作使用該程序的配置模塊：{ 裝載機： { 裝載機： '巴貝爾裝載機'，測試：path.join（__目錄名稱， '應用'），查詢：{ 預設： 'ES2015' ， } } ] } – devwannabe

爲的WebPack 3，模塊選項應該看起來像

 
module: { 
    rules: [ 
    { 
     use: { 
      loader:'babel-loader', 
      options: { presets: ['es2015'] } 
     }, 
     test: /\.js$/, 
     exclude: /node_modules/ 
    } 
    ] 
},

這仍然需要babel-loader和babel-preset-es2015

來源

2017-06-29 16:05:31 PhilVarg

Webpack不能將ES6轉換成ES5

回答

相關問題