javascript - webpack 教程的配置文件没有正确运行 Babel loader

Question

设计师在这里学习前端。我知道这可能是一个非常简单的问题，但我正在做一个学习 webpack 的教程，每当我在 github repo 中运行示例时，它们都不起作用。当我浏览了这些部分时，我已经设法修复了一些阻止它运行的小语法错误，但是在我加载了 babel 加载器和它不工作的东西之后，它抛出了一些非常奇怪的错误，我想不通。由于我对 Babel 并没有太多经验，我只是将其添加到 webpack 配置中以了解其中的技巧，但如果这是 Babel 错误，那我就不知所措了。

这是代码沙盒的链接： https ://codesandbox.io/s/jzq81jo2yv

这也是我的 package.json 的样子：

{
  "name": "webpack-practice",
  "version": "1.0.0",
  "description": "project to practice webpack",
  "main": "index.js",
  "scripts": {
    "prebuild": "del-cli dist -f",
    "build": "webpack",
    "execute": "node /dist/bundle.js",
    "start": "npm run build -s && npm run execute -s"
  },
  "author": "David Aslan French",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.4",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-polyfill": "^6.26.0",
    "babel-preset-es2015": "^6.24.1",
    "del-cli": "^1.1.0",
    "webpack": "^4.12.0",
    "webpack-cli": "^3.0.8"
  },
  "dependencies": {
    "lodash": "^4.17.10"
  }
}

这是我的 webpack.config.js 的样子：

module.exports = {
    entry: './src/main.js',
    output: {
        path: '/dist',
        filename: 'bundle.js'
    },
    module: {
        rules: [
            {
                test: /\.jsx?$/,
                loader: 'babel-loader',
                options: {
                    plugins: ['transform-runtime'],
                    presets: ['es2015']
                }
            }
        ]
    }
};

我还在 Windows 上使用 WSL、Ubuntu。

这也是我正在关注的教程：https ://www.smashingmagazine.com/2017/02/a-detailed-introduction-to-webpack/

这是 github 存储库的链接： https ://github.com/joezimjs/Webpack-Introduction-Tutorial/tree/example2

这也是它给我的错误日志：

> webpack-practice@1.0.0 start /mnt/c/Users/Owner/Work/Web/Webpack-Practice
> npm run build -s && npm run execute -s

[BABEL] Note: The code generator has deoptimised the styling of "/mnt/c/Users/Owner/Work/Web/Webpack-Practice/node_modules/lodash/lodash.js" as it exceeds the max of "500KB".
Hash: 1111e3ba66d401ede87c
Version: webpack 4.12.0
Time: 3983ms
Built at: 06/19/2018 12:50:31 PM
    Asset      Size  Chunks             Chunk Names
bundle.js  89.4 KiB       0  [emitted]  main
 [31] (webpack)/buildin/amd-options.js 82 bytes {0} [built]
 [47] (webpack)/buildin/module.js 521 bytes {0} [built]
 [99] (webpack)/buildin/global.js 770 bytes {0} [built]
[101] ./src/main.js 133 bytes {0} [built]
    + 98 hidden modules

WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/concepts/mode/
/dist/bundle.js:1
(function (exports, require, module, __filename, __dirname) { !function(t){var n={};function r(e){if(n[e])return n[e].exports;var u=n[e]={i:e,l:!1,exports:{}};return t[e].call(u.exports,u,u.exports,r),u.l=!0,u.exports}r.m=t,r.c=n,r.d=function(t,n,e){r.o(t,n)||Object.defineProperty(t,n,{enumerable:!0,get:e})},r.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},r.t=function(t,n){if(1&n&&(t=r(t)),8&n)return t;if(4&n&&"object"==typeof t&&t&&t.__esModule)return t;var e=Object.create(null);if(r.r(e),Object.defineProperty(e,"default",{enumerable:!0,value:t}),2&n&&"string"!=typeof t)for(var u in t)r.d(e,u,function(n){return t[n]}.bind(null,u));return e},r.n=function(t){var n=t&&t.__esModule?function(){return t.default}:function(){return t};return r.d(n,"a",n),n},r.o=function(t,n){return Object.prototype.hasOwnProperty.call(t,n)},r.p="",r(r.s=101)}([function(t,n,r){"use strict"

TypeError: e is not a function
    at Object.<anonymous> (/dist/bundle.js:1:19168)
    at r (/dist/bundle.js:1:172)
    at Object.<anonymous> (/dist/bundle.js:1:19248)
    at r (/dist/bundle.js:1:172)
    at Object.<anonymous> (/dist/bundle.js:1:19379)
    at r (/dist/bundle.js:1:172)
    at Object.<anonymous> (/dist/bundle.js:1:1816)
    at r (/dist/bundle.js:1:172)
    at Object.<anonymous> (/dist/bundle.js:1:3186)
    at r (/dist/bundle.js:1:172)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! webpack-practice@1.0.0 start: `npm run build -s && npm run execute -s`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the webpack-practice@1.0.0 start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/david/.npm/_logs/2018-06-19T18_50_32_168Z-debug.log

标签： javascriptwebpackbabeljs

Answer 1

好吧，我是个白痴。我再次浏览了他的 repo，我注意到他在 webpack.config.js 文件中包含了一个关于排除节点模块的声明。这是 webpack 文件的正确版本：

module.exports = {
    entry: './src/main.js',
    output: {
        path: '/dist',
        filename: 'bundle.js'
    },
    module: {
        rules: [
            {
                loader: 'babel-loader',
                // blacklist node_modules scripts from being processed via Babel
                exclude: /node_modules/,
                options: {
                    // prevents multiple versions of e.g. regeneratorRuntime from
                    // being created when using generators in multiple files
                    plugins: ['transform-runtime'],
                    // tell Babel which presets to use
                    presets: ['es2015']
                }
            }
        ]
    }
};