我正在尝试编写我的第一个npm包（一个hello world-like reactjs组件），我正在与两端的webpack和npm配置文件进行斗争：新包和主应用程序。
经过几个小时和多次试验后，我得到npm start的独立工作包我现在的问题是可以在主应用程序中安装并编译+启动没有错误。
现在，我的错误发生在npm run compile之后：Module not found: Error: Can't resolve 'twist-card-component' in <several wrong directories>正确的位置应为<package-dir>/dist/index.js，其中index.js是在包裹上npm run build && npm pack之后创建的捆绑文件创建
webpack.config.js
/* jshint node: true */
var path = require('path');
module.exports = {
context: path.join(__dirname),
entry: './lib/index.js',
output: {
path: path.join(__dirname, 'dist'),
filename: 'index.js',
libraryTarget: 'umd',
library: 'TwistCardComponent'
},
module: {
loaders: [
{
test: /\.scss$/,
// Query parameters are passed to node-sass
loader: 'style!css!sass?outputStyle=expanded&' +
'includePaths[]=' + (path.resolve(__dirname, './bower_components')) +
'&' +
'includePaths[]=' + (path.resolve(__dirname, './node_modules'))
},
{
test: /(\.js)|(\.jsx)$/,
exclude: /node_modules/,
loader: 'babel-loader',
query: {
optional: ['runtime'],
stage: 0
}
}
]
}
};
的package.json
{
"name": "twist-card-component",
"version": "1.0.0",
"description": "twist card component",
"scripts": {
"test": "eslint lib/ spec/ && ./node_modules/karma/bin/karma start karma.conf.js",
"watch-test": "./node_modules/karma/bin/karma start karma.conf.js --auto-watch --no-single-run",
"build": "webpack -p --display-error-details --colors",
"start": "webpack-dev-server --inline --hot"
},
"author": "",
"license": "BSD",
"keywords": [
"react",
"reactjs",
"react-component"
],
"files":["dist"],
"devDependencies": {
"babel-core": "~5.8.22",
"babel-eslint": "^4.0.10",
"babel-loader": "~5.3.2",
"css-loader": "~0.16.0",
"es5-shim": "~4.1.10",
"eslint": "^0.21.1",
"eslint-plugin-react": "^2.3.0",
"jasmine": "~2.3.2",
"jasmine-core": "~2.3.4",
"karma": "^1.7.1",
"karma-jasmine": "^0.3.8",
"karma-phantomjs-launcher": "^0.2.3",
"karma-sourcemap-loader": "^0.3.7",
"karma-webpack": "^2.0.4",
"node-sass": "^3.13.1",
"phantomjs": "^2.1.7",
"phantomjs-prebuilt": "^2.1.15",
"react": "^15.6.1",
"react-addons-test-utils": "^15.6.0",
"react-dom": "^15.6.1",
"sass-loader": "~2.0.1",
"sourcemap": "^0.1.0",
"style-loader": "~0.12.3",
"webpack": "^1.15.0",
"webpack-dev-server": "~1.10.1"
},
"dependencies": {
"babel-runtime": "~5.8.20"
}
}
的package.json
{
"name": "tracker-dashboard",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "webpack-dev-server --hot",
"compile": "webpack --colors --progress --display-error-details",
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"ajv": "^5.2.2",
"babel-core": "^6.25.0",
"babel-loader": "^7.1.1",
"babel-preset-latest": "^6.24.1",
"babel-preset-react": "^6.24.1",
"bootstrap": "^3.3.7",
"css-loader": "^0.28.4",
"file-loader": "^0.11.2",
"jquery": "^3.2.1",
"node-sass": "^4.5.3",
"react": "^15.6.1",
"react-bootstrap": "^0.31.2",
"react-dom": "^15.6.1",
"react-router-dom": "^4.1.2",
"reflux": "^6.4.1",
"sass-loader": "^6.0.6",
"style-loader": "^0.18.2",
"twist-card-component": "file:../twist-card-component/twist-card-component-1.0.0.tgz",
"url-loader": "^0.5.9"
},
"devDependencies": {
"extract-text-webpack-plugin": "^3.0.0",
"webpack": "^3.5.2",
"webpack-dev-middleware": "^1.12.0",
"webpack-dev-server": "^2.7.1"
}
}
webpack.config.json
const path = require('path');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports = {
context: path.join(__dirname, 'js'),
entry: [
'./index.js',
],
output: {
path: path.join(__dirname, 'www'),
filename: 'bundle.js',
},
module: {
loaders: [
{ test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/ },
{ test: /\.css$/, loader: ExtractTextPlugin.extract(
{
fallback: "style-loader",
use: "css-loader?modules=true&camelCase=true"
}
)},
{
test: /\.(?:png|jpg|svg)$/,
loader: 'url-loader',
query: {
// Inline images smaller than 10kb as data URIs
limit: 10000
}
}
]
},
resolve: {
extensions: ['.js', '.jsx'],
modules: [
path.join(__dirname, 'node_modules'),
],
},
plugins: [
new ExtractTextPlugin({
filename: "bundle.css?[hash]-[chunkhash]-[contenthash]-[name]",
disable: false,
allChunks: true
})
],
devServer: {
port:3000,
contentBase: path.join(__dirname, 'www'),
}
};
ERROR in ./components/panel/Panel.js
Module not found: Error: Can't resolve 'twist-card-component' in '/<path>/tracker-dashboard/js/components/panel'
resolve 'twist-card-component' in '/<path>/tracker-dashboard/js/components/panel'
Parsed request is a module
using description file: /<path>/tracker-dashboard/package.json (relative path: ./js/components/panel)
Field 'browser' doesn't contain a valid alias configuration
after using description file: /<path>/tracker-dashboard/package.json (relative path: ./js/components/panel)
resolve as module
looking for modules in /<path>/tracker-dashboard/node_modules
using description file: /<path>/tracker-dashboard/package.json (relative path: ./node_modules)
Field 'browser' doesn't contain a valid alias configuration
after using description file: /<path>/tracker-dashboard/package.json (relative path: ./node_modules)
using description file: /<path>/tracker-dashboard/node_modules/twist-card-component/package.json (relative path: .)
no extension
Field 'browser' doesn't contain a valid alias configuration
/<path>/tracker-dashboard/node_modules/twist-card-component is not a file
.js
Field 'browser' doesn't contain a valid alias configuration
/<path>/tracker-dashboard/node_modules/twist-card-component.js doesn't exist
.jsx
Field 'browser' doesn't contain a valid alias configuration
/<path>/tracker-dashboard/node_modules/twist-card-component.jsx doesn't exist
as directory
existing directory
using path: /<path>/tracker-dashboard/node_modules/twist-card-component/index
using description file: /<path>/tracker-dashboard/node_modules/twist-card-component/package.json (relative path: ./index)
no extension
Field 'browser' doesn't contain a valid alias configuration
/<path>/tracker-dashboard/node_modules/twist-card-component/index doesn't exist
.js
Field 'browser' doesn't contain a valid alias configuration
/<path>/tracker-dashboard/node_modules/twist-card-component/index.js doesn't exist
.jsx
Field 'browser' doesn't contain a valid alias configuration
/<path>/tracker-dashboard/node_modules/twist-card-component/index.jsx doesn't exist
[/<path>/tracker-dashboard/node_modules/twist-card-component]
[/<path>/tracker-dashboard/node_modules/twist-card-component.js]
[/<path>/tracker-dashboard/node_modules/twist-card-component.jsx]
[/<path>/tracker-dashboard/node_modules/twist-card-component/index]
[/<path>/tracker-dashboard/node_modules/twist-card-component/index.js]
[/<path>/tracker-dashboard/node_modules/twist-card-component/index.jsx]
@ ./components/panel/Panel.js 27:26-57
@ ./components/Main.js
@ ./components/App.js
@ ./index.js
@ multi ./index.js
刚刚添加了＃34; main＆＃34; package.json的关键
"main": "dist/index.js"