node.js - node - web scraping javascript tutorial

El paquete web no convierte ES6 a ES5

Question

Soy muy nuevo en Webpack. Creo que lo estoy haciendo incorrectamente. Me gustaría convertir una función ES6 a la función ES5 usando babel. Así que hice una investigación y encontré babel-loader. Sin embargo, no estoy seguro de lo que estoy haciendo.

Ejecuté npm install babel-loader --save-dev y se agregó a mi package.json

// paquete.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 - Acabo de agregar alguna función aleatoria inútil en la sintaxis ES6. Esperaba ver el formato ES5 en mi archivo bundle.js pero no cambió. Todavía es la sintaxis de ES6 en 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; 

// app / component.js

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

Answer 1

Si desea compilar ES6 a ES5, debe instalar el preajuste Babel ES2015 .

npm install babel-preset-es2015

Entonces necesitas habilitar este preset. Una forma de habilitar esta compilación de ES6 a ES5 es usar la cadena de consulta babel-loader :

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

o opción de consulta:

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

Answer 2

para el paquete web 3, las opciones del módulo deberían verse como

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

esto todavía requiere babel-loader y babel-preset-es2015