app.js（入口点）

Question

我试图将带有es6语法的几个文件解析为带有babel和webpack的es5，但似乎没有完成转换。代码来自webpack docs。

这些是文件和我的配置：

app.js（入口点）

'use strict';

import 'babel-polyfill';
import cats from './cats';
import $ from 'jquery';

$('<h1>Cats</h1>').appendTo('body');
const ul = $('<ul></ul>').appendTo('body');
for (const cat of cats) {
    $('<li></li>').text(cat).appendTo(ul);
}

cats.js

var cats = ['dave', 'henry', 'martha'];
module.exports = cats;

.babelrc

{
    "presets": ["es2015"]
}

webpack.config.js

module.exports = {
    entry: './src/app.js',
    output: {
        path: './bin',
        filename: 'app.bundle.js',
    },
    module: {
        loaders: [{
            test: /\.jsx?$/,
            exclude: /node_modules/,
            loader: 'babel'
        }]
    }
}

的package.json

{
  "name": "webpack-doc-example",
  "version": "1.0.0",
  "description": "",
  "main": "app.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-preset-es2015": "^6.9.0",
    "babel-preset-react": "^6.11.1",
    "babel-preset-stage-0": "^6.5.0",
    "babel-preset-stage-1": "^6.5.0",
    "webpack": "^1.13.1",
    "webpack-dev-server": "^1.14.1"
  },
  "dependencies": {
    "babel-core": "^6.10.4",
    "babel-loader": "^6.1.0",
    "babel-polyfill": "^6.9.1",
    "babel-plugin-transform-runtime": "^6.9.0",
    "babel-runtime": "^6.9.2",
    "jquery": "^3.0.0",
    "regenerate": "^1.3.1",
    "regenerator-runtime": "^0.9.5"
  }
}

当我执行webpack时，它不会转换代码，它只是复制结果。

结果如下：

/******/ (function(modules) { // webpackBootstrap
/******/    // The module cache
/******/    var installedModules = {};

/******/    // The require function
/******/    function __webpack_require__(moduleId) {

/******/        // Check if module is in cache
/******/        if(installedModules[moduleId])
/******/            return installedModules[moduleId].exports;

/******/        // Create a new module (and put it into the cache)
/******/        var module = installedModules[moduleId] = {
/******/            exports: {},
/******/            id: moduleId,
/******/            loaded: false
/******/        };

/******/        // Execute the module function
/******/        modules[moduleId].call(module.exports, module, module.exports,     __webpack_require__);

/******/        // Flag the module as loaded
/******/        module.loaded = true;

/******/        // Return the exports of the module
/******/        return module.exports;
/******/    }


/******/    // expose the modules object (__webpack_modules__)
/******/    __webpack_require__.m = modules;

/******/    // expose the module cache
/******/    __webpack_require__.c = installedModules;

/******/    // __webpack_public_path__
/******/    __webpack_require__.p = "";

/******/    // Load entry module and return exports
/******/    return __webpack_require__(0);
/******/ })
/************************************************************************/
/******/ ([
/* 0 */
/***/ function(module, exports) {

    'use strict';

    import 'babel-polyfill';
    import cats from './cats';
    import $ from 'jquery';

    $('<h1>Cats</h1>').appendTo('body');
    const ul = $('<ul></ul>').appendTo('body');
    for (const cat of cats) {
        $('<li></li>').text(cat).appendTo(ul);
    }

/***/ }
/******/ ]);

如果我跑：

babel --presets es2015 src/app.js --out-file bin/app.bundle2.js

从babel-cli的命令行开始，结果不好，因为它仍然有要求，浏览器无法使用。这是结果：

'use strict';

require('babel-polyfill');

var _cats = require('./cats');

var _cats2 = _interopRequireDefault(_cats);

var _jquery = require('jquery');

var _jquery2 = _interopRequireDefault(_jquery);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : {     default: obj }; }

(0, _jquery2.default)('<h1>Cats</h1>').appendTo('body');
var ul = (0, _jquery2.default)('<ul></ul>').appendTo('body');
var _iteratorNormalCompletion = true;
var _didIteratorError = false;
var _iteratorError = undefined;

try {
    for (var _iterator = _cats2.default[Symbol.iterator](), _step;     !(_iteratorNormalCompletion = (_step = _iterator.next()).done);     _iteratorNormalCompletion = true) {
        var cat = _step.value;

        (0, _jquery2.default)('<li></li>').text(cat).appendTo(ul);
    }
} catch (err) {
    _didIteratorError = true;
    _iteratorError = err;
} finally {
    try {
        if (!_iteratorNormalCompletion && _iterator.return) {
            _iterator.return();
        }
    } finally {
        if (_didIteratorError) {
            throw _iteratorError;
        }
    }
}

我已经阅读并尝试了几乎所有我在谷歌上搜索的内容。

我尝试了以下事项：

我添加了更多预设（第0阶段，阶段1，反应）我尝试在src文件夹中包含代码（我的文件在此文件夹中）

我在webpack配置文件中添加了es2015预设，如下所示：

module.exports = {
    entry: './src/app.js',
    output: {
        path: './bin',
        filename: 'app.bundle.js',
    },
    module: {
        loaders: [{
            test: /\.jsx?$/,
            exclude: /node_modules/,
            loader: 'babel'
        }],
        query: {
            presets: [
                require.resolve('babel-preset-es2015')
            ]
        }
    }
}

，我得到了＆＃39;模块构建失败：错误：无法找到预设＆＃34; es2015＆＃34;相对于目录＆＃39;所以我在webpack配置文件中添加了es2015预设，如下所示：

module.exports = {
    entry: './src/app.js',
    output: {
        path: './bin',
        filename: 'app.bundle.js',
    },
    module: {
        loaders: [{
            test: /\.jsx?$/,
            exclude: /node_modules/,
            loader: 'babel'
        }],
        query: {
            presets: [
                require.resolve('babel-preset-es2015')
            ]
        }
    }
}

，我在./~/regenerator-runtime/runtime.js'中得到了错误。这是一个死胡同，我尝试添加npm模块

"babel-plugin-transform-runtime": "^6.9.0",
"babel-runtime": "^6.9.2",
"regenerate": "^1.3.1",
"regenerator-runtime": "^0.9.5"

但是我无法解决它，所以我不得不回到开头的配置并信任babelrc配置。

我不知道我还能做些什么。

提前感谢任何帮助。

Webpack和Babel无法正确解析es2015

app.js（入口点）

cats.js

.babelrc

webpack.config.js

的package.json

0 个答案: