2

我有一个通过 webpack 开发服务器运行的小应用程序（在开发环境中）。

热模块更换运行良好，我可以在编辑我的 js 文件时即时看到我的更改。

但是一旦我在 babel loader 配置中添加了 es2015 预设，它就会停止工作！

webpack.config.js：

const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const FriendlyErrorsWebpackPlugin = require('friendly-errors-webpack-plugin');

process.env.BABEL_ENV = 'development';

module.exports = {
  entry: {
    app: ['react-hot-loader/patch', path.join(__dirname, 'src')]
  },
  output: {
    path: path.join(__dirname, 'build'),
    filename: '[name].js',
  },
  module: {
   rules: [
     {
       test: /\.js$/,
       include: path.join(__dirname, 'src'),
       use: {
         loader: 'babel-loader',
         options: {
           cacheDirectory: true,
           presets: ['react'],
         },
       },
     }
   ]
  },
  devServer: {
    historyApiFallback: true,
    quiet: true,
    hotOnly: true,
    contentBase: './build',
    host: 'my-host.local',
    port: 8091,
    watchOptions: {
      aggregateTimeout: 300,
      poll: 1000,
    },
  },
  plugins: [
    new HtmlWebpackPlugin({
      title: 'Webpack demo',
    }),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NamedModulesPlugin(),
    new FriendlyErrorsWebpackPlugin(),
    new webpack.WatchIgnorePlugin([
      path.join(__dirname, 'node_modules')
    ]),
  ],
};

src/index.js 文件：

import React from 'react';
import ReactDOM from 'react-dom';
import Component from './Component';
import { AppContainer } from 'react-hot-loader';

const app = document.createElement('div');
document.body.appendChild(app);

const render = App => {
  ReactDOM.render(
    <AppContainer><App /></AppContainer>,
    app
  );
};

render(Component);

if (module.hot) {
  module.hot.accept('./Component', () => render(Component));
}

组件.js

import React from 'react';

export default class Title extends React.Component {
  render() {
    return (
      <div>Ass</div>
    );
  }
}

.babelrc

{
  "presets": [
    [
      "react",
      "es2015",
      {
        "modules": false
      }
    ]
  ],
  "env": {
    "development": {
      "plugins": [
        "react-hot-loader/babel"
      ]
    }
  }
}

一旦我更换

presets: ['react'],

经过

presets: ['es2015', 'react'],

热模块更换功能停止工作.. 有人知道吗？

（也毫不犹豫地指出我的代码中的不良做法或可避免的并发症）

4

1 回答 1

1

您需要以下内容.babelrc（我不知道为什么）。

.babelrc

{
  "presets": [
    ["es2015", {"modules": false}],
    "stage-2",
    "react"
  ],
}

其中 stage-2 是 npm 包babel-preset-stage-2。

于 2017-06-16T11:21:54.913 回答