使用 Webpack 构建 Gatsby 组件无法转译 Gatsby 模块

Question

我正在尝试制作一个 Gatsby 组件库（使用特定的 Gatsby 库而不是一般的 React 组件）。

我一直只使用 babel 进行编译，但我希望能够翻译任何 CSS-in-JS 并做其他事情，所以我尝试使用 Webpack 进行构建。

当我尝试编译 Gatsby 组件时，它在 Gatsby 模块中失败了。我知道 Gatsby 是未转译的 ES6，所以我在我的 webpack 配置中包含 node_modules 来转译，但我仍然：

ERROR in ./node_modules/gatsby/cache-dir/gatsby-browser-entry.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: /Users/kylecalica/Code/gatsby-learn/gatsby-components/node_modules/gatsby/cache-dir/gatsby-browser-entry.js: Unexpected token (25:4)

  23 | 
  24 |   return (
> 25 |     <React.Fragment>
     |     ^
  26 |       {finalData && render(finalData)}
  27 |       {!finalData && <div>Loading (StaticQuery)</div>}
  28 |     </React.Fragment>

网页包：

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const htmlWebpackPlugin = new HtmlWebpackPlugin({
  filename: "index.html"
});

module.exports = {
  entry: path.join(__dirname, "/src/index.js"),
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, "/webpack/dist")
  },
  module: {
    rules: [
      {
       test: /\.(js|jsx)$/,
       use: {
         loader: "babel-loader"
       }
     },
     {
       test: /\.css$/,
       use: ['style-loader', 'css-loader']
     },

   ]
  },
  plugins: [htmlWebpackPlugin],
  devServer: {
   contentBase: path.join(__dirname, "dist"),
   port: 9000,
   open: true
 }
};

我目前正在尝试在我的代码中采用 Gatsby 所说的对 Storybook 执行的操作，但很难弄清楚如何将其从他们奇怪的方式转换为我的方式？

Storybook 的 webpack 方式：

module.exports = ({ config }) => {
  // Transpile Gatsby module because Gatsby includes un-transpiled ES6 code.
  config.module.rules[0].exclude = [/node_modules\/(?!(gatsby)\/)/]

  // use installed babel-loader which is v8.0-beta (which is meant to work with @babel/core@7)
  config.module.rules[0].use[0].loader = require.resolve("babel-loader")

  // use @babel/preset-react for JSX and env (instead of staged presets)
  config.module.rules[0].use[0].options.presets = [
    require.resolve("@babel/preset-react"),
    require.resolve("@babel/preset-env"),
  ]

  config.module.rules[0].use[0].options.plugins = [
    // use @babel/plugin-proposal-class-properties for class arrow functions
    require.resolve("@babel/plugin-proposal-class-properties"),
    // use babel-plugin-remove-graphql-queries to remove static queries from components when rendering in storybook
    require.resolve("babel-plugin-remove-graphql-queries"),
  ]

  // Prefer Gatsby ES6 entrypoint (module) over commonjs (main) entrypoint
  config.resolve.mainFields = ["browser", "module", "main"]

  return config
}

.babelrc :

{
  "presets": [
    "babel-preset-gatsby-package",
    "@babel/preset-react",
    "@babel/preset-env"
    ]
}

Answer 1

我通过转换 Storybook 的 webpack 模块的内容解决了这个问题。不过，我仍在对其进行测试，但目前可以正常编译：

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const htmlWebpackPlugin = new HtmlWebpackPlugin({
  filename: "index.html"
});

module.exports = {
  entry: path.join(__dirname, "/src/index.js"),
  output: {
    filename: 'index.js',
    path: path.resolve(__dirname, "webpack")
  },
  module: {
    rules: [
      {
       test: /\.(js|jsx)$/,
       use: {
         loader: "babel-loader",
         options: {
           presets: ["babel-preset-gatsby-package"],
           plugins: ["@babel/plugin-proposal-class-properties"]
         },
       },
       exclude: [/node_modules\/(?!(gatsby)\/)/],
     },
     {
       test: /\.css$/,
       use: ['style-loader', 'css-loader']
     },

   ]
  },
  plugins: [htmlWebpackPlugin],
  devServer: {
   contentBase: path.join(__dirname, "dist"),
   port: 9000,
   open: true
 }
};

使用 Webpack 构建 Gatsby 组件无法转译 Gatsby 模块

Building Gatsby components using Webpack cannot transpile Gatsby module

javascript

webpack

babeljs

gatsby

babel-loader