私有 NPM 库引发错误"Module parse failed"

Question

我正试图用React创建我的库，并在本地使用它(与我的公司git存储库一起使用)。

我可以在使用npm run start进行开发的同时测试我的应用程序。我的应用程序正在运行。

但当我想在其他项目中使用它时，我得到了这个错误：

中的错误/node_modules/mylib/src/views/calendar.jsx模块解析失败：意外的令牌(10:53)您可能需要适当的加载程序来处理此文件类型

涉及的行是：

const Calendar = ({ month = moment(), dayCellTitle = <DayCellTitle />, header = <CalendarHeader/>, children }) => {

该包是这样导入的：

"mylib": "git+ssh://[e-mail]:mylib/mylib.git"

我试过这个，但我得到了最差的：

插件/预设文件不允许导出对象，只允许导出函数。在里面/home/xxxxxx/Documents/workspaces/react calendar/node_modules/bbabel-preset-stage-0/lib/index.js

这里是我的包的文件：

webpack.config.js

const path = require('path');
const pkg = require('./package.json');
const libraryName= pkg.name;
module.exports = {
output: {
path: path.join(__dirname, './dist'),
filename: 'react-calendar.js',
library: libraryName,
libraryTarget: 'umd',
publicPath: '/dist/',
umdNamedDefine: true
},
module: {
rules: [
{ test: /.(js|jsx)$/,
exclude: /node_modules/,
use: ['babel-loader']
}
]
},
resolve: {
alias: {
'react': path.resolve(__dirname, './node_modules/react'),
'react-dom': path.resolve(__dirname, './node_modules/react-dom'),
}
},
externals: {
// Don't bundle react or react-dom
react: {
commonjs: "react",
commonjs2: "react",
amd: "React",
root: "React"
},
"react-dom": {
commonjs: "react-dom",
commonjs2: "react-dom",
amd: "ReactDOM",
root: "ReactDOM"
}
}
};

package.json

{
"name": "react-calendar",
"version": "0.0.1",
"description": "React Calendar UI by",
"main": "./dist/lib/index.js",
"scripts": {
"start": "./node_modules/.bin/parcel docs/index.html",
"build": "./node_modules/.bin/webpack --mode=production",
"build:docs": "./node_modules/.bin/parcel build docs/index.js -d ./dist/docs && cp docs/index.html dist/docs/index.html",
"test": "jest",
"tdd": "jest --watch"
},
"author": "Xero",
"license": "MIT",
"dependencies": {
"lodash": "^4.17.11",
"mobx": "^5.9.0",
"mobx-react": "^5.4.3",
"moment": "^2.24.0",
"moment-range": "^4.0.1",
"react": "^16.2.0",
"react-dom": "^16.2.0",
"semantic-ui-css": "^2.4.1",
"semantic-ui-react": "^0.85.0",
"settings": "^0.1.1"
},
"peerDependencies": {
"lodash": "^4.17.11",
"mobx": "^5.9.0",
"mobx-react": "^5.4.3",
"moment": "^2.24.0",
"moment-range": "^4.0.1",
"react": "^16.2.0",
"react-dom": "^16.2.0",
"semantic-ui-css": "^2.4.1",
"semantic-ui-react": "^0.85.0",
"settings": "^0.1.1"
},
"devDependencies": {
"@babel/core": "^7.0.0-0",
"@babel/plugin-proposal-class-properties": "^7.3.0",
"@babel/plugin-proposal-decorators": "^7.3.0",
"@babel/preset-env": "^7.3.1",
"@babel/preset-react": "^7.0.0",
"babel-loader": "^8.0.5",
"babel-plugin-module-resolver": "^3.1.3",
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-preset-env": "^1.7.0",
"babel-preset-react": "^6.24.1",
"enzyme": "^3.8.0",
"enzyme-adapter-react-16": "^1.9.1",
"jest": "^24.1.0",
"parcel-bundler": "^1.6.2",
"react-test-renderer": "^16.8.0",
"webpack": "^4.1.1",
"webpack-cli": "^2.0.12",
"webpack-node-externals": "^1.6.0"
},
"jest": {
"moduleNameMapper": {
"\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/spec/javascript/__mocks__/fileMock.js",
"\.(css|scss|less)$": "<rootDir>/spec/javascript/__mocks__/styleMock.js"
},
"roots": [
"src",
"tests"
],
"moduleFileExtensions": [
"js",
"jsx"
],
"moduleDirectories": [
"node_modules",
"src"
],
"setupFiles": [
"<rootDir>/tests/setup.js"
]
}
}

.babelrc

{
"presets": ["@babel/preset-env", "@babel/preset-react",],
"plugins":  [
["@babel/plugin-proposal-decorators", { "legacy": true }],
["@babel/plugin-proposal-class-properties", { "loose": true }]
]
}

附带问题：

在其他项目中进行导入之前，有没有一种方法可以知道库是否会被导入而不会出错

编辑

我已经将yarn run build添加到我的package.json中，并且启动它不会引发任何错误：

Entrypoint main [big] = react-calendar.js
[45] (webpack)/buildin/module.js 497 bytes {0} [built]
[48] (webpack)/buildin/global.js 472 bytes {0} [built]
[244] ./node_modules/moment/locale sync ^./.*$ 3 KiB {0} [optional] [built]
[368] ./src/index.js + 52 modules 182 KiB {0} [built]
| ./src/index.js 65 bytes [built]
| ./src/views/calendar.jsx 1.17 KiB [built]
| ./src/views/day_cell_title.jsx 358 bytes [built]
| ./src/views/calendar_header.jsx 1.15 KiB [built]
| ./src/store/calendar_store.js 3.85 KiB [built]
| ./src/views/calendar_grid.jsx 1.49 KiB [built]
| ./src/views/calendar_navigation_button.jsx 928 bytes [built]
| ./src/views/calendar_title.jsx 290 bytes [built]
| ./src/generators/month_generator.js 556 bytes [built]
| ./src/painters/day_cell_color.js 593 bytes [built]
| ./src/views/day_cell_content.jsx 547 bytes [built]
| ./src/settings.js 332 bytes [built]
| ./src/painters/event_color.js 374 bytes [built]
| ./src/painters/range_color.js 591 bytes [built]
| ./src/views/empty_day_cell_content.jsx 340 bytes [built]
|     + 38 hidden modules
+ 743 hidden modules

Answer 1

您正在重新分发包含JSX语法的源代码。通常，在发布之前，您需要对其进行转换。如果没有，那么您的家属将需要使用React支持配置他们的babel-loader，并确保他们不会排除您的包模块。

所以你的配置看起来不错，除了排除匹配：

module: {
rules: [
{ test: /.(js|jsx)$/,
exclude: /node_modules/,
use: ['babel-loader']
}
]
}

我建议您使用{ include }并列出应该明确匹配的路径。要查找包源所在的路径，请使用path.dirname(require.resolve('@yours/package-name'))。

Answer 2

问题有两个：

1.建造遗忘和未承诺

我没有构建我的项目(使用yarn run build)，最重要的是，我没有提交编译的文件(dist/main.js)

2.导入错误

考虑到第1点，我的导入是错误的。

我在做：

import {Calendar} from "project-react-calendar/src/views/calendar";

而不是：

import {Calendar} from "project-react-calendar";

这是可用的，有了这个index.js:

import { Calendar } from './views/calendar'
export {
Calendar
}

Answer 3

您的npm run start脚本似乎使用parcel，而不是webpack我想webpack.config.js根本不会影响它？也许您应该确保parcel确实启动了适当的加载程序。

"start": "./node_modules/.bin/parcel docs/index.html", // <- invokes parcel bundler
"build": "./node_modules/.bin/webpack --mode=production",

试试npm run build，如果它成功了，那就是事实。