Question

我具有以下结构，并且编译良好。

项目
- 动物园
  - Src
  - 组件
    - MySharedComponents

当我尝试将共享组件作为一个项目移动并尝试将其安装在其他项目中时，如下所示。这会导致编译语法错误。

功能（我的共享组件项目）
- Src
  - 组件
    - MySharedComponents
项目
- node_modules
  - 功能
- 动物园
  - Src
  - 组件

GIT存储库：https://github.com/andiappan-ar/babelIssue.git

我使用以下命令安装了共享项目

> npm install --save ../../feature

下面的我的Zoo Project server.webpack.config.js

const path = require('path');
const env = require('@babel/preset-env');
const reactApp = require('babel-preset-react-app');
// Webpack build configuration to build the SSR bundle.
// Invoked by build:server.

module.exports = {
  mode: 'production',
  entry: path.resolve(__dirname, './server.js'),
  target: 'node',
  output: {
    path: path.resolve(__dirname, '../build'),
    filename: '../build/server.bundle.js',
    libraryTarget: 'this',
  },
  optimization: {
    minimize: false,
  },
  module: {
    rules: [
      {
        test: /\.m?jsx?$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            babelrc: false,
            presets: [env, reactApp],
          },
        },
      },
      {
        test: /\.html$/,
        exclude: /node_modules/,
        use: { loader: 'html-loader' },
      },
      {
        // anything not JS or HTML, we load as a URL
        // this makes static image imports work with SSR
        test: /\.(?!js|mjs|jsx|html|graphql$)[^.]+$/,
        exclude: /node_modules/,
        use: {
          loader: 'url-loader',
        },
      },
      {
        // anything in node_modules that isn't js,
        // we load as null - e.g. imported css from a module,
        // that is not needed for SSR
        test: /\.(?!js|mjs|jsx|html|graphql$)[^.]+$/,
        include: /node_modules/,
        use: {
          loader: 'null-loader',
        },
      },
    ],
  },
};

下面的我的Zoo项目package.json

{
  "name": "jss-sample-react",
  "description": "Application utilizing Sitecore JavaScript Services and React (create-react-app).",
  "version": "11.0.2",
  "private": true,
  "config": {
    "appName": "SafariZoo",
    "rootPlaceholders": [
      "jss-main"
    ],
    "sitecoreDistPath": "/dist/SafariZoo",
    "sitecoreConfigPath": "/App_Config/Include/zzz",
    "graphQLEndpointPath": "/api/SafariZoo",
    "language": "en"
  },
  "engines": {
    "node": ">=8.1",
    "npm": ">=5.6.0",
    "yarn": "yarn is not supported, please use npm"
  },
  "author": {
    "name": "Sitecore Corporation",
    "url": "https://jss.sitecore.net"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/sitecore/jss.git"
  },
  "bugs": {
    "url": "https://github.com/sitecore/jss/issues"
  },
  "license": "Apache-2.0",
  "dependencies": {
    "@sitecore-jss/sitecore-jss-react": "^11.0.2",
    "@sitecore-jss/sitecore-jss-tracking": "^11.0.2",
    "@types/bootstrap": "^4.2.2",
    "@types/jquery": "^3.3.29",
    "feature": "../../feature",
    "apollo-cache-inmemory": "~1.3.12",
    "apollo-client": "~2.4.8",
    "apollo-link": "~1.2.6",
    "apollo-link-batch-http": "~1.2.6",
    "apollo-link-http": "~1.5.9",
    "apollo-link-persisted-queries": "~0.2.2",
    "axios": "~0.18.0",
    "babel-plugin-transform-class-properties": "^6.24.1",
    "bootstrap": "^4.3.1",
    "graphql": "~14.0.2",
    "graphql-tag": "~2.10.0",
    "i18next": "~13.1.2",
    "i18next-fetch-backend": "~2.0.0",
    "isomorphic-fetch": "~2.2.1",
    "jquery": "^3.3.1",
    "react": "~16.7.0",
    "react-apollo": "~2.3.3",
    "react-dom": "~16.7.0",
    "react-helmet": "~5.2.0",
    "react-i18next": "~9.0.2",
    "react-router-dom": "~4.3.1",
    "react-scripts": "2.1.3",
    "serialize-javascript": "~1.6.1"
  },
  "devDependencies": {
    "@babel/register": "~7.0.0",
    "@sitecore-jss/sitecore-jss-cli": "^11.0.2",
    "@sitecore-jss/sitecore-jss-dev-tools": "^11.0.2",
    "@sitecore-jss/sitecore-jss-manifest": "^11.0.2",
    "babel-loader": "8.0.4",
    "babel-preset-react-app": "~7.0.0",
    "chalk": "~2.4.2",
    "chokidar": "~2.0.4",
    "cross-env": "~5.2.0",
    "graphql.macro": "~1.0.2",
    "html-loader": "~0.5.5",
    "http-proxy-middleware": "~0.19.1",
    "npm-run-all": "~4.1.5",
    "null-loader": "~0.1.1",
    "url-loader": "~1.1.2",
    "webpack": "4.19.1",
    "webpack-cli": "~3.2.1"
  },
  "scripts": {
    "jss": "jss",
    "start": "npm-run-all --serial bootstrap:disconnected --parallel start:react start:proxy start:watch-components",
    "start:connected": "scjss-verify-setup && npm-run-all --serial bootstrap:connected start:react start:watch-components",
    "build": "npm-run-all --serial bootstrap:connected build:client build:server",
    "scaffold": "node scripts/scaffold-component.js",
    "start:react": "react-scripts start",
    "start:proxy": "node scripts/disconnected-mode-proxy.js",
    "start:watch-components": "node scripts/generate-component-factory.js --watch",
    "build:client": "cross-env-shell PUBLIC_URL=$npm_package_config_sitecoreDistPath \"react-scripts build\"",
    "build:server": "cross-env-shell NODE_ENV=production \"webpack --config server/server.webpack.config.js\"",
    "bootstrap:connected": "node scripts/bootstrap.js",
    "bootstrap:disconnected": "node scripts/bootstrap.js --disconnected",
    "graphql:update": "node -r babel-register ./scripts/update-graphql-fragment-data.js",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ]
}

我尝试了以下选项，但无济于事，

不是使用手动安装共享项目，而是使用lerna也会导致相同的问题。
当前，我的项目在webpackconfig本身中没有我的所有babel预设文件“ .babelrc”。即使我在两个项目中都引入了babelrc文件也无法解决问题。
我遇到了许多git链接，他们说要以多种方式添加预设。但没有任何效果。相关问题似乎仍未解决https://github.com/facebook/create-react-app/issues/5100。

如何解决此问题？或我如何在不出现Babel问题的情况下将我的组件共享给多个项目？

从node_modules编译组件时反应语法错误

0 个答案: