node.js - babel-preset-env 无法与 webpack-dev-server v2.2.0-rc.0 一起使用

Question

我正在尝试设置“webpack 2”和babel-preset-env。

我有以下基本配置:

const config = require('./config');
const path = require('path');

module.exports = {
    devtool: 'source-map',
    performance: { 
        hints: false 
    },
    entry: [
        './src/index.js',
    ],
    output: {
        path: path.join(__dirname, '../dist'),
        publicPath: '/dist/',
        filename: 'app.js'
    },
    plugins: [],
    module: {
        loaders: [
            {
                test: /\.js$/,
                loader: 'babel-loader',
                exclude: ['/node_modules/'],
                query: {  
                    'presets': [['env', { 
                        "modules": false,
                        "targets": {
                            "browsers": ["last 2 versions", "safari >= 7"]
                        }
                    }]],
                    'plugins': [],
                },
            },
            //...
        ],
    },
}

以及以下产品配置:

const base = require('./webpack.base');
const webpack = require('webpack');

base.plugins.push(
    new webpack.optimize.UglifyJsPlugin({
        compress: {
            warnings: true,
        },
    })
);

module.exports = base;

以及以下开发配置:

const base = require('./webpack.base');
const webpack = require('webpack');

base.entry.push(
    'webpack/hot/dev-server',
    'webpack-dev-server/client?http://localhost:4000'
);

base.plugins.push(
    new webpack.HotModuleReplacementPlugin()
);

module.exports = base;

最后这是我的开发服务器配置:

const dev = require('./webpack.dev');
const webpack = require('webpack');
const server = require('webpack-dev-server');
const path = require('path');

const compiler = webpack(dev);

const instance = new server(compiler, {
    hot: true,
    filename: dev.output.filename,
    publicPath: dev.output.publicPath,
    stats: {
        colors: true,
    }
});

instance.listen(4000, 'localhost', () => {})

我尝试添加 inline: false 并将 contentBase 设置为我的应用程序的绝对路径，按照此 post一切都没有运气。

现在，当我使用 prod 配置运行时，一切都可以正常编译，但是当我使用 dev 配置运行时，出现以下错误:

ERROR in ./~/debug/browser.js
Module build failed: Error: Couldn't find preset "es2015" relative to directory "/home/otis/Developer/hassle/node_modules/debug"                                                        
    at /home/otis/Developer/hassle/node_modules/babel-core/lib/transformation/file/options/option-manager.js:299:19                                                                     
    at Array.map (native)                                                                                                                                                               
    at OptionManager.resolvePresets (/home/otis/Developer/hassle/node_modules/babel-core/lib/transformation/file/options/option-manager.js:270:20)                                      
    at OptionManager.mergePresets (/home/otis/Developer/hassle/node_modules/babel-core/lib/transformation/file/options/option-manager.js:259:10)                                        
    at OptionManager.mergeOptions (/home/otis/Developer/hassle/node_modules/babel-core/lib/transformation/file/options/option-manager.js:244:14)                                        
    at OptionManager.init (/home/otis/Developer/hassle/node_modules/babel-core/lib/transformation/file/options/option-manager.js:374:12)                                                
    at File.initOptions (/home/otis/Developer/hassle/node_modules/babel-core/lib/transformation/file/index.js:216:65)                                                                   
    at new File (/home/otis/Developer/hassle/node_modules/babel-core/lib/transformation/file/index.js:139:24)                                                                           
    at Pipeline.transform (/home/otis/Developer/hassle/node_modules/babel-core/lib/transformation/pipeline.js:46:16)                                                                    
    at transpile (/home/otis/Developer/hassle/node_modules/babel-loader/lib/index.js:38:20)                                                                                             
 @ ./~/sockjs-client/lib/main.js 25:10-26                                                                                                                                               
 @ ./~/sockjs-client/lib/entry.js                                                                                                                                                       
 @ (webpack)-dev-server/client/socket.js                                                                                                                                                
 @ (webpack)-dev-server/client?http://localhost:4000                                                                                                                                    
 @ multi main

这里是我的 package.json 的副本(如果有帮助的话):

{
  "name": "hassle",
  "version": "0.0.0",
  "description": "Hassle an event organisation app",
  "main": "index.js",
  "scripts": {
    "dev": "NODE_ENV=development node build/server.js",
    "build": "NODE_ENV=production webpack --config build/webpack.prod.js",
    "test": "echo 'lets implement'"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/Shipwrecked/Hassle.git"
  },
  "author": "Otis Wright",
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/Shipwrecked/Hassle/issues"
  },
  "homepage": "https://github.com/Shipwrecked/Hassle#readme",
  "dependencies": {},
  "devDependencies": {
    "babel-core": "^6.2",
    "babel-loader": "^6.2",
    "babel-preset-env": "^1.0",
    "css-loader": "^0.26",
    "file-loader": "^0.9",
    "node-sass": "^4.0",
    "rimraf": "^2.5",
    "sass-loader": "^4.1",
    "style-loader": "^0.13",
    "webpack": "^2.2.0-rc.1",
    "webpack-dev-server": "^2.2.0-rc.0"
  }
}

Answer 1

调试包存在一个问题，它的根目录中有一个 .babelrc 文件，但只需要预设作为开发依赖项。

此问题已在最近的拉取请求中修复。查看本期https://github.com/visionmedia/debug/issues/381