web-dev-qa-db-ja.com

WebpackがES6をES5に変換しない

私はWebpackを初めて使います。私は間違ってやっていると思う。 babelを使用してES6関数をES5関数に変換したいと思います。それで、私はいくつかの研究をしました、そして、私はバベルローダーを見つけました。しかし、私は何をしているのかわかりません。

Npm install babel-loader --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のES6構文のままです

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;

// app/component.js

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

ES6をES5にコンパイルする場合は、Babel ES2015プリセット をインストールする必要があります。

npm install babel-preset-es2015

次に、このプリセットを有効にする必要があります。このES6からES5へのコンパイルを有効にする1つの方法は、 babel-loader クエリ文字列を使用することです：

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

またはクエリオプション：

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

webpack 3の場合、モジュールオプションは次のようになります。

 module：{
 rules：
 {
 use：{
 loader： 'babel-loader'、
 options： {プリセット：['es2015']} 
}、
 test：/\.js$/,
 exclude：/node_modules/
} 
 
}、

これにはまだbabel-loaderとbabel-preset-es2015が必要です

11
PhilVarg

同じ問題が発生しました。さて、公式はこの構成をwebpackに追加するための回答を反応させます

{
  "presets": ["es2015", "react", "stage-0"],
  "plugins": ["react-hot-loader/babel"]
}

ここにリンクがあります： https://github.com/facebook/react/issues/8379

0
Inessa Pokromkina