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

Question

>我正在尝试制作一个盖茨比组件库(使用特定的盖茨比库而不是一般的 React 组件(。

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

当我尝试编译盖茨比组件时，它在盖茨比模块中失败了。我知道盖茨比是未转译的 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
}
};

我目前正在尝试在我的代码中采用盖茨比所说的对故事书做的事情，但很难弄清楚如何将其从他们奇怪的方式翻译成我的？

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