Reactjs 导入自定义npm包将导致空/空对象
我可以在同一个包中导入MyComponent并将其呈现在页面上,但我无法链接或下载MyComponent包并导入组件 package.json:Reactjs 导入自定义npm包将导致空/空对象,reactjs,npm,ecmascript-6,webpack,Reactjs,Npm,Ecmascript 6,Webpack,我可以在同一个包中导入MyComponent并将其呈现在页面上,但我无法链接或下载MyComponent包并导入组件 package.json: { "name": "my-component", "version": "1.0.0", "main": "dist/index.js", "directories": {}, "dependencies": {}, "devDependencies": { "babel-loader": "^6.2.3",
{
"name": "my-component",
"version": "1.0.0",
"main": "dist/index.js",
"directories": {},
"dependencies": {},
"devDependencies": {
"babel-loader": "^6.2.3",
"babel-preset-es2015": "",
"babel-preset-react": "",
"css": "^2.2.1",
"css-loader": "^0.23.1",
"file-loader": "^0.8.5",
"node-sass": "^3.4.2",
"react": "^0.14.7",
"react-dom": "^0.14.7",
"sass": "^0.5.0",
"sass-loader": "^3.1.2",
"style": "0.0.3",
"style-loader": "^0.13.0",
"webpack": "^1.12.13",
"webpack-dev-server": "^1.14.1"
}
}
webpack.config.js:
var path = require('path');
module.exports = {
entry: './src/MyComponent.jsx',
output: {
path: './dist/',
filename: './index.js'
},
module: {
loaders: [{
test: /\.jsx$/,
include: path.resolve(__dirname),
exclude: /node_modules/,
loader: 'babel-loader',
query: {
presets: ['react', 'es2015']
}
},
{
test: /\.scss$/,
include: /.scss$/,
loader: 'style!css!sass'
},
{
test: /\.html$/,
loader: "file?name=[name].[ext]",
},]
}
};
./src/MyComponent.jsx
import React from 'react';
export default class MyComponent extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<div>Hello World.</div>
);
}
}
MyComponent.propTypes = {
class: React.PropTypes.string
}
MyComponent.defaultProps = {
class: ''
}
console.log(MyComponent)
当我从“my component”导入模块时,MyComponent.jsx中的console.log语句会按预期记录“function MyComponent(props){…”,但新应用程序中的console.log语句会记录一个空对象
呈现new-app.jsx时的控制台输出:我相信第一个日志来自MyComponent.jsx,第二个日志来自我的新应用程序
index.js:19783 MyComponent(props) {
_classCallCheck(this, MyComponent);
return _possibleConstructorReturn(this, Object.getPrototypeOf(MyComponent).call(this, props));
}
index.js:58 Object {}
我的配置中是否缺少任何内容?我是否以错误的方式导出/导入?解决方案是将其添加到webpack.config.js的输出中
library: 'MyComponent',
libraryTarget: 'umd'
我也有类似的问题
import {MySingleton} from "../../../dist/my-bundle-webpack-package";
MySingleton.instance.foo();
错误:
Cannot read property 'instance' of undefined
我的包文件的index.ts是:
export class MySingleton{
...
}
module.exports = MySingleton;
问题的解决方案是删除模块。导出
:
export class MySingleton{
...
}
添加
libraryTarget:“umd”
在这里没有帮助
我在尝试通过npm链接将npm包作为lib使用时遇到了一些问题。我的问题在于两个项目上的重复依赖关系-Project和lib导入了相同的模块。Webpack在这里无声地失败。
通过将“externals”
添加到Lib中的我的webpack配置中来修复它,以告知这些包将存在于项目中
externals: {
"pixi.js": "pixi.js",
immer: "immer",
redux: "redux",
lodash: "lodash",
gsap: "gsap",
},
我有点困惑..你的node_modules文件夹中有一个名为my component
的包吗?是的,在我的新应用程序中,有一个文件夹./node_modules/my component包含源代码和工件。这可以通过npm链接它们,或者通过发布到npm并进行npm安装来实现。好的,也许可以看看他们在这里做的方式:,你们可能很久以前就需要在你们的网页配置中使用这个库,但我自己刚刚遇到这个问题。这些行实际上是做什么的?
externals: {
"pixi.js": "pixi.js",
immer: "immer",
redux: "redux",
lodash: "lodash",
gsap: "gsap",
},