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': [],
                },
            },
            //...
        ],
    },
}

以下prod配置：

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文件，但是只需要将预设作为dev依赖项。

这已在最近的拉取请求中修复。请参阅此问题https://github.com/visionmedia/debug/issues/381

babel-preset-env不使用webpack-dev-server v2.2.0-rc.0

1 个答案: