3

我是一个使用 ReactJS 的菜鸟，现在我正在使用 React 制作一个小部件，我已经创建了不同的组件，我已经创建了应用程序npx create-react-app，并且一切都在工作，但现在我正在尝试捆绑所有组件，css 和单个 .js 文件中的文件，以便能够在网页中安装小部件。

我的代码是这样的：

结构

index.js

index.js

应用程序.js

应用程序.js

我刚刚看到一些帖子和博客表明我需要创建自己的 webpack.config.js 文件并放入如下内容：

`

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

module.exports = {
  entry: {
    "bundle.js": glob.sync("build/static/?(js|css)/main.*.?(js|css)").map(f => path.resolve(__dirname, f)),
  },
  output: {
    filename: "build/static/js/bundle.min.js",
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"],
      },
    ],
  },
  plugins: [new UglifyJsPlugin()],
}

`

它创建了一个 .js 文件，但是当我将文件放入 html 文档时没有显示任何内容

4

1 回答 1

7

最后我得到了它！

默认情况下npx create-react-app，创建一个包含大量配置、文件夹和文件的结构，以便轻松开始使用 React 编写应用程序，其中一个配置是设置 webpack 以在我们键入“npm build”时创建一个“build”目录我们的应用程序的组件并允许我们将其部署到任何地方，但在我的情况下，我只需要使用我正在创建的小部件分发一个 .js 文件，这个 .js 文件可以放在任何 HTML 页面中的 a 内，并且小部件将独立于页面独立工作，为此我遵循了以下步骤：

  1. 首先，我需要更改“package.json”文件中的“scripts”部分，以指示 webpack 不仅会创建“build”目录，还会创建一个包含所有 CSS、图像、组件的 bundle.js。
"scripts": {
    "start": "react-scripts start",
    "build": "npm run build:react && npm run build:bundle",
    "build:react": "react-scripts build",
    "build:bundle": "webpack --config webpack.config.js",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
},

请注意，我已经替换了“bundle”脚本，表示将执行“build:react”和“build:bundle”

  1. 如我们所见，“build:bundle”将采用“webpack.config.js”的配置，在我们最初的配置中我们没有这个文件，因为webpack是由“npx create-react-app”自动配置的，所以，我们需要在我们app的根路径下创建这个文件，并创建一个配置告诉webpack需要打包所有东西，我的配置是这样的：
const UglifyJsPlugin = require("uglifyjs-webpack-plugin");

module.exports = {
  entry: {
    entry: './src/index.js',
  },
  output: {
    filename: "build/static/js/WidgetCL.js",
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"],
      },
      {
        test: /\.m?js$/,
        exclude: /(node_modules)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env'],
            plugins: ['@babel/plugin-transform-runtime']
          }
        }
      }
    ],
  },
  plugins: [new UglifyJsPlugin()],
}

我告诉 webpack 它需要将 npx 自动创建的“index.js”文件作为入口点，webpack 也会创建一个 WidgetCL.js 作为输出，有趣的部分在“模块”部分，几个小时后或者问题，我可以配置两个“加载器”，一个用于 .css 文件，另一个用于我的小部件中的所有 .js 组件，使用 Babel 作为加载器。

  1. 要使用 Babel，我需要在项目的根路径中创建一个名为 .babelrc 的文件并以这种方式配置它：
{
    "presets": [
        "@babel/react" , 
        "@babel/env"  
    ],
    "plugins": [
        "@babel/plugin-proposal-class-properties"
    ]
}

在此之后，我只需打开一个终端并输入“npm run build”，然后 webpack 创建一个“build”文件夹以及一个包含我的 .js 文件的“dist”文件夹。

于 2020-03-10T17:58:05.350 回答