Question

我正在使用babel-loader测试webpack，但是在构建项目时，babel-loader无法正常工作。输出始终是Webpack生成的文件。

我的配置：

webpack.config.js

const path = require('path')

module.exports = {
  entry: './src/app.js',

  output: {
    filename: 'main.js',
    path: path.resolve('dist')
  },

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

package.json

{
  "name": "teste-webpack",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.2.2",
    "@babel/preset-env": "^7.2.3",
    "babel-loader": "^8.0.4",
    "webpack": "^4.28.2",
    "webpack-cli": "^3.1.2"
  }
}

和.babelrc

{
  "presets": ["@babel/preset-env"]
}

在src文件夹中，我有三个文件：产品（具有两个属性的简单模板）； ProductController（导入并实例化Product模型以使用console.log列出）；和app.js（我的输入文件，仅实例化控制器并调用main方法）；

我的输出（dist / main.js）在这里：

!function(e){var n={};function t(r){if(n[r])return n[r].exports;var o=n[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,t),o.l=!0,o.exports}t.m=e,t.c=n,t.d=function(e,n,r){t.o(e,n)||Object.defineProperty(e,n,{enumerable:!0,get:r})},t.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},t.t=function(e,n){if(1&n&&(e=t(e)),8&n)return e;if(4&n&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(t.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&n&&"string"!=typeof e)for(var o in e)t.d(r,o,function(n){return e[n]}.bind(null,o));return r},t.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(n,"a",n),n},t.o=function(e,n){return Object.prototype.hasOwnProperty.call(e,n)},t.p="",t(t.s=0)}([function(e,n,t){"use strict";t.r(n);var r=function e(n,t){!function(e,n){if(!(e instanceof n))throw new TypeError("Cannot call a class as a function")}(this,e),this._name=n,this._price=t};function o(e,n){for(var t=0;t<n.length;t++){var r=n[t];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}(new(function(){function e(){!function(e,n){if(!(e instanceof n))throw new TypeError("Cannot call a class as a function")}(this,e)}var n,t,u;return n=e,(t=[{key:"getProducts",value:function(){var e=[];return e.push(new r("A",1e3)),e.push(new r("B",1500)),e.push(new r("C",2e3)),e}},{key:"list",value:function(){this.getProducts().forEach(function(e){return console.log(e)})}}])&&o(n.prototype,t),u&&o(n,u),e}())).list()}]);

我认为babel的输出会有所不同。有人可以帮助我正确设置项目吗？谢谢

Babel无法转换到Es5

0 个答案: