Grunt/Webpack/Babel 中的路径错误答案

【问题标题】：Path error in Grunt/Webpack/BabelGrunt/Webpack/Babel 中的路径错误
【发布时间】：2015-11-01 21:23:43
【问题描述】：

我是第一次玩 ES6 模块，尝试使用 Webpack 进行基本的捆绑。我想使用 Babel 6（目前最新最好的）在 Webpack 加载器中进行转译。我读过this 和this 和this。

package.json 包括：

 "devDependencies": {
    "babel": "~6.0.12",
    "babel-core": "~6.0.12",
    "babel-loader": "~6.0.0",
    "babel-preset-es2015": "^6.0.14",
    "grunt": "~0.4.5",
    "grunt-webpack": "^1.0.11",
    "webpack": "^1.12.2",
    "webpack-dev-server": "^1.12.1"
  },

文件结构：

myproject
├── js
│   ├── es6
│   │   ├── app.js
│   │   ├── lib
│   │   │   ├── lib1.js
│   │   │   ├── lib2.js
│   │   └── modules
│   │       └── _myModule.js
├── node_modules
├── index.html
├── gruntfile.js

gruntfile.js

module.exports = function(grunt) {
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),

        webpack: {
            options: {
                entry: "./js/es6/app.js",
                output: {
                    path: __dirname,
                    filename: "webpacked.js",
                },
                module : {
                    loaders: [
                        {

       // grunt --verbose says the problem is with the next line
                            include: path.resolve(__dirname, "es6"),
                            loader: 'babel',    
                            query: {
                                presets: ['es2015']
                            }
                        }
                    ]
                },
                failOnError: true,
                resolve: {
                    root: [ "js", "node_modules" ],
                }       
            },
            build : {
                devtool: "sourcemap",
                debug: true
            }
        },

    });

    grunt.loadNpmTasks('babel');
    grunt.loadNpmTasks('babel-core');
    grunt.loadNpmTasks('babel-loader');
    grunt.loadNpmTasks('babel-preset-es2015');
    grunt.loadNpmTasks('grunt-minify-html');
    grunt.loadNpmTasks('grunt-webpack');    
    grunt.loadNpmTasks('grunt-sass');
    grunt.loadNpmTasks('grunt-contrib-watch');

    grunt.registerTask('default', ['webpack']);
};

我显然遗漏了一些非常基本的路径处理。我什至无法开始，我已经转了几个小时，尝试了很多组合。错误是：

Loading "Gruntfile.js" tasks...ERROR
>> ReferenceError: path is not defined

非常感谢任何帮助。

【问题讨论】：

标签： javascript gruntjs webpack babeljs

【解决方案1】：

你在做

include: path.resolve(__dirname, "es6"),

并使用path 模块，但您尚未加载它。

var path = require('path');

【讨论】：

:) 谢谢。现在我收到错误“模块解析失败：myproject/js/es6/app.js 第 1 行：意外令牌：'从 Fling.js 导入 Fling'您可能需要适当的加载程序来处理此文件类型。”似乎转译 Babel 加载器仅设置为在模块上工作，而不是在 app.js“入口”文件本身的 ES6“导入”代码上。如何在构建开始时转译条目“app.js”文件，同时仍然只使用 Webpack？
include 需要匹配任何 ES6 文件，因此如果您在 es6 文件夹之外有一个文件，则需要扩展 include 以匹配它。