Question

我有许多动人的作品，我正试图弄清楚如何解决这个问题：

未捕获错误：locals [0]似乎不是启用了热模块替换API的module对象。您应该在Babel配置中使用env部分禁用生产中的react-transform-hmr。请参阅自述文件中的示例：https://github.com/gaearon/react-transform-hmr

我正在做的是为react-toolbox打包cljsjs，这需要使用webpack将react-toolbox编译成JavaScript（5）文件，然后可以从ClojureScript中使用。我认为这一步是我必须找到解决方案的地方。我的webpack.config.js看起来像这样：

const path = require('path');
const webpack = require('webpack');
const autoprefixer = require('autoprefixer');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

var entryName = "react-toolbox.inc";

module.exports = {
    entry: path.join(__dirname, "components", "index.js"),

    externals: {
        "react": "React",
        "react-dom": "ReactDOM"
    },

    output: {
        filename: entryName + ".js",
        libraryTarget: "var",
        library: "ReactToolbox"
    },

    resolve: {
        extensions: ['', '.js', '.jsx', '.scss']
    },

    module: {
        loaders: [
            {
                test: /(\.js|\.jsx)$/,
                exclude: /(node_modules)/,
                loader: "babel",
                query: {presets: ["es2015", "stage-0", "react"]}
            },
            {
                test: /(\.scss|\.css)$/,
                loader: ExtractTextPlugin.extract("style", "css?sourceMap&modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!postcss!sass")
            }
        ]
    },

    postcss: [autoprefixer],

    node: {
        fs: 'empty'
    },

    plugins: [
        new ExtractTextPlugin(entryName + '.css', {allChunks: true})
    ]
};

我在网上找到的是关于在.babelrc中将NODE_ENV设置为生产的内容，但我不能指望环境修改能够编译此包，因此，无论我应用什么解决方案，都必须通过此文件或{{ 3}}

我在我的应用程序中成功使用了这个库，它直接包含（不包装在cljsjs中）和以下webpack配置：

const path = require("path");
const webpack = require("webpack");
const autoprefixer = require("autoprefixer");
const ExtractTextPlugin = require("extract-text-webpack-plugin");

module.exports = {
    entry: [
        "./src/app_js/webpack.js"
    ],
    output: {
        path: path.join(__dirname, "www", "app"),
        filename: "js_dependencies.js"
    },
    resolve: {
        extensions: ["", ".scss", ".css", ".js", ".json"],
        modulesDirectories: [
            "node_modules",
            path.resolve(__dirname, "./node_modules")
        ]
    },
    module: {
        loaders: [
            {
                test: /(\.js|\.jsx)$/,
                exclude: /(node_modules)/,
                loader: "babel",
                query: { presets: ["es2015", "stage-0", "react"] }
            }, {
                test: /(\.scss|\.css)$/,
                loader: ExtractTextPlugin.extract("style", "css?sourceMap&modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!postcss!sass")
            }
        ]
    },
    postcss: [autoprefixer],
    plugins: [
        new ExtractTextPlugin("js_dependencies.css", { allChunks: true }),
        new webpack.optimize.OccurenceOrderPlugin(), // https://webpack.github.io/docs/list-of-plugins.html#occurrenceorderplugin
        new webpack.NoErrorsPlugin(), // Don't emit compiled assets when there's an error.
    ]
};

Webpack，babel，react，react-transform-hmr，不知道问题出在哪里

0 个答案: