無法公開組件庫與webpack和babel作出反應

我正在創建一個用於響應的小型組件庫。可能需要的東西，如var Components = require('components')。這將有個別組件，很像react-bootstrap。我試圖用babel將webpack編譯成index.js文件。彙編進行得很順利。我將它發佈到我的本地npm註冊表中，並將其安裝在我的其他項目之一中。當我需要它 - require('components') - 要求返回一個空的對象。下面是我的文件夾結構無法公開組件庫與webpack和babel作出反應

root 
|- components 
| |- ImageEditor.js 
| 
|- lib 
| |- index.compiled.js (file compiled by webpack) 
| 
|- index.js (requires ./components/ImageEditor.js, entry point for webpack) 
|- webpack.config.js

ImageEditor.js

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import Canvas from './utils/canvas'; 
import '../stylesheets/imageeditor.scss'; 

class ImageManipulation extends React.Component { 
    static propTypes = {}; 
    state = { 
     height: 200, 
     width: 200, 
     scale: 1.25 
    }; 

    static defaultProps = { 
     color: [213, 214, 217, 0.6], 
     image: "" 
    }; 

    ... 

    render() { 
     return (
      <div className="_react-image-manipulation"> 
       <div className="_cover-box"> 
        { this.loadComponent() } 
       </div> 
      </div> 
     ); 
    } 
} 

export default ImageManipulation;

index.js

import ImageEditor from './components/ImageEditor'; 

export default { 
    ImageEditor 
};

webpack.config.js

var path = require('path'); 
var NODE_ENV = process.env.NODE_ENV || 'development'; 
var WebpackNotifierPlugin = require('webpack-notifier'); 
var UglifyJSPlugin = require("webpack/lib/optimize/UglifyJsPlugin"); 
var CleanWebpackPlugin = require("clean-webpack-plugin"); 

var commonPlugins = [ 
    new WebpackNotifierPlugin({ 
     title: 'Contour Components' 
    }) 
]; 

function getPlugins() { 
    if (NODE_ENV == 'prod') { 
     commonPlugins.push(new CleanWebpackPlugin(['lib/*'])); 
     commonPlugins.push(new UglifyJSPlugin({ 
      compress: { 
       warnings: false 
      } 
     })); 
    } 
    return commonPlugins; 
} 

module.exports = { 
    devtool: 'sourcemap', 
    entry: { 
     index: './index.js' 
    }, 
    output: { 
     path: path.join(__dirname, 'public'), 
     filename: '[name].compiled.js' 
    }, 
    plugins: getPlugins(), 
    module: { 
     loaders: [{ 
      test: /\.js$/, 
      loader: 'babel', 
      query: { 
       cacheDirectory: true, 
       presets: ['es2015', 'stage-0', 'react'], 
       plugins: ['add-module-exports', "transform-class-properties"] 
      }, 
      exclude: /node_modules/ 
     }, { 
      test: /\.json$/, 
      loader: 'json-loader' 
     }, { 
      test: /\.png$/, 
      loader: "url-loader?limit=100000&mimetype=image/png" 
     }, { 
      test: /(\.scss|\.css)$/, 
      include: /components/, 
      loader: 'style!css!sass' 
     }] 
    }, 
    resolve: { 
     extensions: ['', '.scss', '.js', '.json', '.png'], 
     modulesDirectories: [ 
      'node_modules', 
      'components' 
     ] 
    } 
};

任何想法我在這裏做錯了嗎？

來源

2016-06-30 Jophin Joseph

你有一個的package.json？通過在你的本地註冊表中安裝你的意思是'npm link'或類似'cp my-module node_modules /'？ –

我們已經建立了一個本地npm註冊表。我已發佈到該註冊表。在我的另一個項目中，我添加了這個作爲依賴項。 'npm install'從該註冊表中獲取發佈的模塊並安裝它。我認爲這與此沒有任何關係。因爲，我創建了另一個需要生成文件「index.compiled.js」的js文件，並將該組件呈現爲「index.html」。然後我將這個文件託管在本地節點服務器中。即使這樣也行不通。它以相同的錯誤失敗。 –

package.json是否明確指定了你的主文件？如果您查看其他項目中的'node_modules/components'，那麼這些文件是否與您期望的相同？ –

您正在默認導出中導出對象中的組件。 Babel 6爲您生成以下CommonJS模塊。 See REPL：

exports.default = { 
    ImageEditor: ImageEditor 
};

然後你可以使用這個組件是這樣的：

var ImageEditor = require('my-lib').default.ImageEditor

你的組件在默認鍵隱藏。如果您不需要它，請改用命名導出。

export {ImageEditor};

爲此，巴貝爾將產生以下代碼

exports.ImageEditor = ImageEditor;

看，沒有多餘的default鍵，一切都按預期方式工作

來源

2016-07-01 07:45:24

我已經在webpack配置文件中爲babel-loader添加了「add-module-exports」插件來覆蓋此行爲。這樣我就不必明確調用default。 –

好的，讓我們展示你的生成代碼然後導出。我猜這個問題在這裏某處。 –

無法公開組件庫與webpack和babel作出反應

回答

相關問題