通过npm

Question

我想制作一个我可以放在npmjs.org上并在其他React项目中重新安装的react组件。理想情况下，该组件只需将转换后的SCSS嵌入JS中，这样，如果另一个项目使用其他工具（LESS / CSS），它仍然可以工作。

我从create-react-app开始我的项目，然后弹出运行自定义版本（下面提供的文件）。当我尝试在第二个项目中import对其进行文件创建时，该文件会产生错误（目前只有一个create-react-app自举应用程序，没有自定义内容）。错误为Line 23: 'DEBUG' is not defined no-undef。

作为概念证明，我首先要使用的组件是<Button />，如下面的文件所示。另外，除了支持SCSS之外，我还没有更改webpack.config.dev.js文件，因此我的本地开发环境在我用来构建Button组件的应用程序中工作得很好。 src文件夹的源应用程序文件结构如下所示：

/src
    /components
        /Button
            Button.js
            Button.scss
            index.js
        index.js
    app.js
    index.js

webpack.config.npm.js

const path = require("path");
const UglifyJsPlugin = require("uglifyjs-webpack-plugin");

module.exports = {
    entry: path.join(__dirname, "../src/components"),
    output: {
        path: path.join(__dirname, "../lib"),
        filename: "[name].bundle.js"
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                use: [
                    {
                        loader: "babel-loader",
                        options: {
                            presets: [
                                "react",
                                "env"
                            ]
                        }
                    }
                ]
            },
            {
                test: /\.scss$/,
                use: [
                    "style-loader",
                    {
                        loader: "postcss-loader",
                        options: {
                            options: {}
                            // plugins: () => {
                            //   autoprefixer({ browsers: [ 'last 2 versions' ] });
                            // }
                        }
                    },
                    "sass-loader"
                ]
            }
        ]
    },
    plugins: [new UglifyJsPlugin()]
};

Button.js

import React from 'react';

export default function Button(props) {
    return (
        <button
            className="Button"
            type="button"
        >
            {props.children}
        </button>
    );
}

/src/components/Button/index.js

import './Button.scss';

export {default} from './Button';

/src/components/index.js

export {default as Button} from './Button';