为什么我的组件无法在生产模式下运输?

时间:2018-08-11 18:42:30

标签: node.js reactjs webpack rollupjs

我们的开发团队从三个月前开始使用React,我们喜欢React,现在出现了一个新项目,我们想重用我们的一些组件并将它们公开。我们启动了一个新的 npm 项目,并复制了我们所做的基本控件(输入),测试了 import'./../ sharedcontrols /'并进行了工作,然后发布到npm而且没有用,那么我们发现组件也需要打包,我们现在使用Rollup。发布新结构并 import npmpackage 后,它可以在webpackdevserver上工作,但为生产而进行编译会产生错误意外令牌:名称(输入)(输入是其中一个名称组件)。

我在两个webpack配置文件之间找不到任何显着差异,为什么某个组件可以在开发模式下工作,但不能打包用于生产?在发布组件的过程中我们是否犯了错误?

生产webpack配置文件:

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

module.exports = env => {
  const plugins = [new ExtractTextPlugin("css/[name].css")];

  if (env.NODE_ENV === "production") {
    plugins.push(new CleanWebpackPlugin(["dist"], { root: __dirname }));
  }

  return {
    entry: {
      index: path.resolve(__dirname, "index.js"),
      miscuentas: path.resolve(__dirname, "miscuentas.js")
    },
    output: {
      path: path.resolve(__dirname, "dist"),
      filename: "react/[name].js",
      publicPath: "/",
      chunkFilename: "react/[name].js"
    },
    module: {
      rules: [
        {
          test: /\.(js|jsx)$/,
          exclude: /(node_modules)/,
          use: {
            loader: "babel-loader",
            options: {
              presets: ["env", "react", "stage-2"]
            }
          }
        },
        {
          test: /\.css$/,
          use: ExtractTextPlugin.extract({
            use: [
              {
                loader: "css-loader",
                options: {
                  minimize: true
                }
              }
            ]
          })
        },
        {
          test: /\.scss$/,
          use: ["style-loader", "css-loader", "sass-loader"]
        },
        {
          test: /\.(jpg|png|gif|svg)$/,
          use: {
            loader: "url-loader",
            options: {
              limit: 10000,
              fallback: "file-loader",
              name: "images/[name].[hash].[ext]"
            }
          }
        }
      ]
    },
    plugins
  };
};

开发webpack配置文件::

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  entry: {
    index: path.resolve(__dirname, "index.js"),
    miscuentas: path.resolve(__dirname, "miscuentas.js")
  },
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "react/[name].js",
    chunkFilename: "react/[name].js"
  },
  devServer: {
    port: 9000,
    proxy: { "**": { target: "http://localhost:8080/", secure: false, changeOrigin: true } }
  },
  devtool: "eval-source-map",
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /(node_modules)/,
        use: {
          loader: "babel-loader",
          options: {
            presets: ["env", "react", "stage-2"]
          }
        }
      },
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"]
      },
      { test: /\.scss/, use: ["style-loader", "css-loader", "sass-loader"] },
      {
        test: /\.(jpg|png|gif|svg)$/,
        use: {
          loader: "url-loader",
          options: {
            limit: 1000000,
            fallback: "file-loader",
            name: "images/[name].[hash].[ext]"
          }
        }
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      filename: "index.html",
      template: "./index.html",
      chunks: ["index"]
    })
  ]
};

感谢您的帮助。

0 个答案:

没有答案