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

回答

相关问题