如何将React组件导出为npm包？ Create-React-App语法错误：意外令牌 [英] How to export React component as npm package? Create-React-App SyntaxError: Unexpected token

问题描述

我已经创建了名称为 create-react-app-npm的react app。在./src/index.js文件中，我导出了组件以在另一个项目中使用它的npm包。首先，我已经在我的主根目录中运行了这段代码。

I have created react app which name is "create-react-app-npm". And in the ./src/index.js file I have exported component to use it npm package in the another project. Firstly I have run this code in my main root.

npm run exit 然后是我的项目的下一部分

npm run eject and then next part of my project

import React from 'react';
import './index.css';
import App from './App';

class ExportApp extends React.Component{
    render(){
        return(<App sayHi="hello There I am creating my first npm package"/>);
    }
}
export default ExportApp;

这是create-react-app-npm文件夹中的package.json文件

{
  "name": "create-react-app-npm",
  "version": "0.1.0",
  "main": "src/index.js",
  "dependencies": {
    "@babel/core": "7.5.5",
    "@svgr/webpack": "4.3.2",
    "@typescript-eslint/eslint-plugin": "1.13.0",
    "@typescript-eslint/parser": "1.13.0",
    "babel-eslint": "10.0.2",
    "babel-jest": "^24.8.0",
    "babel-loader": "8.0.6",
    "babel-plugin-named-asset-import": "^0.3.3",
    "babel-preset-react-app": "^9.0.1",
    "camelcase": "^5.2.0",
    "case-sensitive-paths-webpack-plugin": "2.2.0",
    "css-loader": "2.1.1",
    "dotenv": "6.2.0",
    "dotenv-expand": "4.2.0",
    "eslint": "^6.1.0",
    "eslint-config-react-app": "^5.0.1",
    "eslint-loader": "2.2.1",
    "eslint-plugin-flowtype": "3.13.0",
    "eslint-plugin-import": "2.18.2",
    "eslint-plugin-jsx-a11y": "6.2.3",
    "eslint-plugin-react": "7.14.3",
    "eslint-plugin-react-hooks": "^1.6.1",
    "file-loader": "3.0.1",
    "fs-extra": "7.0.1",
    "html-webpack-plugin": "4.0.0-beta.5",
    "identity-obj-proxy": "3.0.0",
    "is-wsl": "^1.1.0",
    "jest": "24.8.0",
    "jest-environment-jsdom-fourteen": "0.1.0",
    "jest-resolve": "24.8.0",
    "jest-watch-typeahead": "0.3.1",
    "mini-css-extract-plugin": "0.5.0",
    "optimize-css-assets-webpack-plugin": "5.0.3",
    "pnp-webpack-plugin": "1.5.0",
    "postcss-flexbugs-fixes": "4.1.0",
    "postcss-loader": "3.0.0",
    "postcss-normalize": "7.0.1",
    "postcss-preset-env": "6.7.0",
    "postcss-safe-parser": "4.0.1",
    "react": "^16.9.0",
    "react-app-polyfill": "^1.0.2",
    "react-dev-utils": "^9.0.3",
    "react-dom": "^16.9.0",
    "resolve": "1.12.0",
    "resolve-url-loader": "3.1.0",
    "sass-loader": "7.2.0",
    "semver": "6.3.0",
    "style-loader": "1.0.0",
    "terser-webpack-plugin": "1.4.1",
    "ts-pnp": "1.1.2",
    "url-loader": "2.1.0",
    "webpack": "4.39.1",
    "webpack-dev-server": "3.2.1",
    "webpack-manifest-plugin": "2.0.4",
    "workbox-webpack-plugin": "4.3.1"
  },
  "scripts": {
    "start": "node scripts/start.js",
    "build": "node scripts/build.js",
    "test": "node scripts/test.js"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "jest": {
    "roots": [
      "<rootDir>/src"
    ],
    "collectCoverageFrom": [
      "src/**/*.{js,jsx,ts,tsx}",
      "!src/**/*.d.ts"
    ],
    "setupFiles": [
      "react-app-polyfill/jsdom"
    ],
    "setupFilesAfterEnv": [],
    "testMatch": [
      "<rootDir>/src/**/__tests__/**/*.{js,jsx,ts,tsx}",
      "<rootDir>/src/**/*.{spec,test}.{js,jsx,ts,tsx}"
    ],
    "testEnvironment": "jest-environment-jsdom-fourteen",
    "transform": {
      "^.+\\.(js|jsx|ts|tsx)$": "<rootDir>/node_modules/babel-jest",
      "^.+\\.css$": "<rootDir>/config/jest/cssTransform.js",
      "^(?!.*\\.(js|jsx|ts|tsx|css|json)$)": "<rootDir>/config/jest/fileTransform.js"
    },
    "transformIgnorePatterns": [
      "[/\\\\]node_modules[/\\\\].+\\.(js|jsx|ts|tsx)$",
      "^.+\\.module\\.(css|sass|scss)$"
    ],
    "modulePaths": [],
    "moduleNameMapper": {
      "^react-native$": "react-native-web",
      "^.+\\.module\\.(css|sass|scss)$": "identity-obj-proxy"
    },
    "moduleFileExtensions": [
      "web.js",
      "js",
      "web.ts",
      "ts",
      "web.tsx",
      "tsx",
      "json",
      "web.jsx",
      "jsx",
      "node"
    ],
    "watchPlugins": [
      "jest-watch-typeahead/filename",
      "jest-watch-typeahead/testname"
    ]
  },
  "babel": {
    "presets": [
      "react-app"
    ]
  },
  "devDependencies": {
    "babel-cli": "^6.26.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-0": "^6.24.1"
  }
}

我已经运行了 npm链接在终端中，而我在项目的根文件夹中。

I have run npm link in the terminal while I am in the root folder of my project.

创建了这个主项目之后，我还创建了 npm_test 项目文件夹，使用 create-react-app npm_test 代码。

After I have created this main project, I have also created npm_test project folder by using create-react-app npm_test code.

我已经运行了 npm链接create-react-app-npm 代码以链接先前的主项目，即create-react-app-npm 和我的第二个项目npm-test项目。

I have run npm link create-react-app-npm code to link previous main project which is create-react-app-npm and my second npm-test project.

我的 npm-test 项目文件夹中的App.js文件如下。

My App.js file as follows in my npm-test project folder.

import React from 'react';
import './App.css';
import ExportApp from 'create-react-app-npm'

function App2() {
  return (
    <div className="App">
     <ExportApp/>
    </div>
  );
}

export default App2;

当我运行npm start时，我无法运行该项目。我收到了错误消息。我不知道这是什么意思。我该怎么办？

when I run npm start I could not run the project. I have got the error messages. I do not have any ideas what does it mean. What should I do?

Failed to compile.

../create-react-app-npm/src/index.js
SyntaxError: /home/semih/Desktop/create-react-app-npm/src/index.js: Unexpected token (7:15)

   5 | class ExportApp extends React.Component{
   6 |     render(){
>  7 |         return(<App sayHi="hello There I am creating my first npm package"/>);
     |                ^
   8 |     }
   9 | }
  10 | export default ExportApp;

我期望在<$ c中运行 ExportMain 组件$ c> npm-test 项目。我应该遵循的路径是什么？

I have expected to run ExportMain component in the npm-test project. What should be the path which I should follow?

推荐答案

创建React App / CRA并不是构建和捆绑npm的最佳工具包，其主要目的是创建单页应用程序。对于组件库，CRA团队推荐使用更灵活的工具链。

Create React App/CRA is not the optimal tool to build and bundle npm packages, its main purpose is to create Single Page Applications. For component libraries, CRA team recommends to use more flexible toolchains.

弹出CRA后，您仍然可以尝试调整Webpack配置。这是一个示例配置，其中包含针对npm软件包的基本设置：

As you have ejected CRA, you can still try to adjust Webpack config. Here is an example config with the essential settings targeting npm packages:

// simply way to exclude all node_modules from bundle.
// You can configure entries manually, too.
const nodeExternals = require('webpack-node-externals');

module.exports = {
  ...
  output: {
    // provide entry point exports via CommonJS / as npm package
    libraryTarget: "commonjs"
  },
  ...
  // ignore built-in modules like path, fs, etc.
  target: "node",
  // don't bundle node_modules with your library
  // external packages should be required
  externals: [nodeExternals()]
};

关于CRA，请将这些设置添加到基本配置< root> / config / webpack.config.js 。可能的进一步调整：

Concerning CRA, add those settings to the base config <root>/config/webpack.config.js. Possible Further adjustments:

output: {
  // give your main npm package file a static name
  // It should be stored to build/node_bundle.js
  filename: "node_bundle.js"
},

package.json：

package.json:

"main": "build/node_bundle.js"

最后，构建您的库并将其在客户端应用程序中使用。

Last, build your library and require it in your client application.

• Webpack libraryTarget 设置


• Webpack 外部设置


• webpack-node-externals


• 创作库
  

• Webpack libraryTarget setting
• Webpack externals setting
• webpack-node-externals
• Authoring libraries

这篇关于如何将React组件导出为npm包？ Create-React-App语法错误：意外令牌的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！