Webpack Babel-loader переносит код с помощью eval () - PullRequest
Новая
       10

Webpack Babel-loader переносит код с помощью eval ()

0 голосов
/ 15 мая 2018

У меня проблема с Webpack и Babel. Я пытаюсь перенести мой код JavaScript в файл пакета. Вот структура файла и фрагменты:

структура файла: 

- src
| file.js
package.json
webpack.config.js

package.json: 

{
  "name": "babel-webpack-starter",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --mode development"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.4",
    "babel-preset-env": "^1.7.0",
    "webpack": "^4.8.3",
    "webpack-cli": "^2.1.3",
    "webpack-dev-server": "^3.1.4"
  }
}

webpack.config.js: 

const path = require('path');

module.exports = {
    entry: {
        app: './src/file.js'
    },
    output: {
        path: path.resolve(__dirname, 'build'),
        filename: 'app.bundle.js'
    },
    module: {
        rules: [
            {
                test: /\.js?$/,
                exclude: /node_modules/,
                use: [
                    {
                        loader: 'babel-loader',
                        options: {
                            presets: ['env']
                        }
                    }
                ]
            }
        ]
    }
}

Когда я ввожу webpack --mode development, он успешно создает файл app.bundle.js в каталоге build.

enter image description here

Однако, похоже, он не работает должным образом, потому что в конце build/app.bundle.js, где я ищу код из src/file.js, у меня есть следующее: 

/*! no static exports found */
/***/ (function(module, exports, __webpack_require__) {

"use strict";
eval("\n\nvar fun = function fun() {\n  return console.log('Hello World');\n};\n\n//# sourceURL=webpack:///./src/file.js?");

/***/ })

Что странно, я не должен просто иметь это вместо этого? 

/***/ (function(module, exports, __webpack_require__) {

"use strict";
let fun = () => console.log('Hello World')

/***/ })

Есть ли проблема с конфигом?

Ответы [ 2 ]

0 голосов
/ 18 мая 2018

Это на самом деле не из-за babel, а из-за webpack. Для этого требуется опция с именем devtool, которая решает, должен ли он eval кодировать или использовать какую-либо карту исходного кода.

Возможно, вы ищете следующее: 

// webpack.config.js (excerpt)
module.exports = {
    // ...
    devtool: 'inline-source-map'
    // ...
};

inline-source-map опускает eval в пользу хорошо-встроенной исходной карты внутри пакета. Не используйте его для производства; -)

Существует несколько вариантов devtool, каждый из которых имеет свои преимущества и недостатки. Для получения дополнительной информации по этой теме, пожалуйста, обратитесь к официальной документации веб-пакета .

0 голосов
/ 16 мая 2018

После бесчисленных часов исследований я, наконец, нашел решение, предустановка, которую нужно использовать, это babel-preset-env и , а не env. 

const path = require('path');

module.exports = {
    entry: {
        app: './src/file.js'
    },
    output: {
        path: path.resolve(__dirname, 'build'),
        filename: 'app.bundle.js'
    },
    module: {
        rules: [
            {
                test: /\.js?$/,
                exclude: /node_modules/,
                use: [
                    {
                        loader: 'babel-loader',
                        options: {
                            presets: ['babel-preset-env'] // <-- here
                        }
                    }
                ]
            }
        ]
    }
}
...