使用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>

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: '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做什么，但很难弄清楚如何将其从他们奇怪的方式转换为我的方式？

故事书中的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
 }
};