npmパッケージからES6モジュールをインポート

Question

最初のnpmパッケージを作成し公開しました。このパッケージにはJSのES6構文が含まれており、webpackとbabelでES5に変換されます。

は、今私は、このNPMパッケージを使用したいが、それは次のエラーで失敗します。使用方法については

ERROR in ./node_modules/chokidar/index.js 
Module not found: Error: Can't resolve 'fs' in 'C:\dev\git\open-source\test\node_modules\chokidar' 
@ ./node_modules/chokidar/index.js 3:9-22 
@ ./node_modules/watchpack/lib/DirectoryWatcher.js 
@ ./node_modules/watchpack/lib/watcherManager.js 
@ ./node_modules/watchpack/lib/watchpack.js 
@ (webpack)/lib/node/NodeWatchFileSystem.js 
@ (webpack)/lib/node/NodeEnvironmentPlugin.js 
@ (webpack)/lib/webpack.js 
@ ./node_modules/technology-radar/webpack.config.js 
@ ./sample/app.js 

私は、次のファイル（最小限の）セットを持って

package.json：

"devDependencies": { 
    "babel-cli": "^6.26.0", 
    "babel-core": "^6.26.0", 
    "babel-loader": "^7.1.2", 
    "babel-preset-env": "^1.6.0", 
    "babel-preset-es2015": "^6.24.1", 
    "webpack": "^3.5.6", 
    "webpack-dev-server": "^2.4.5", 
    "babel-polyfill": "^6.26.0", 
    "html-webpack-plugin": "^2.28.0" 
}, 
"dependencies": { 
    "d3": "3.5.17", 
    "technology-radar": "^1.0.3" 
} 

webpack.config.js

const path = require('path'); 
const webpack = require('webpack'); 
const HtmlWebpackPlugin = require('html-webpack-plugin'); 
const UglifyJSPlugin = require('uglifyjs-webpack-plugin') 

module.exports = { 
    entry: { 
     sample: './sample/app.js', 
    }, 
    output: { 
     path: path.resolve(__dirname, 'dist'), 
     filename: '[name].js' 
    }, 
    module: { 
     loaders: [ 
      { 
       loader: 'babel-loader', 
       include: [ 
        path.resolve(__dirname, "sample") 
       ], 
       test: /\.js$/ 
      } 
     ] 
    }, 
    plugins: [ 
     new UglifyJSPlugin(), 
     new HtmlWebpackPlugin({ 
      template: 'sample/index.html', 
      filename: 'index.html', 
      inject: 'body' 
     }) 
    ], 
    devtool: "#source-map" 
}; 

サンプル/ app.js

import Radar from 'technology-radar'; 

var radar = new Radar("#techradarContainer"); 
radar.render(); 

使い方やNPMパッケージ自体に存在しているかどうかはわかりません。 パッケージのソースコードはgithub https://github.com/raman-nbg/techradarにあります。 npmパッケージは​​にあります。

エクスポートするクラス（パッケージのwebpack.config.jsのエントリポイントとして定義）は、src/Radar.jsにexport default class Radar { ... }と定義されています。エントリポイントは

module.exports = { 
    entry: { 
    "technology-radar": "./src/Radar.js", 
    ... 
    } 
    ... 
} 

Answer 1

と定義されています。パブリッシュとパッケージの使用方法を誤解しているようです。が公開される前にnpmに公開

完全WebPACKのを無視して、標準npmモジュールは、あなたのパッケージのルートであるJSファイルにmainセットを持っており、一般的にパッケージはバベルしてコンパイルされています。通常technology-radarを公開する前に、あなたはlib内ES5にsrcディレクトリのすべてをコンパイルする

babel src -d lib 

でbabel-cliのようなパッケージを使用すると思います。次に、あなたのpackage.json#main値がどのパッケージ

"main": "./lib/index.js" 

かは、あなたのパッケージの概念ルートであるべきである 。あなたの場合はRadar.jsになる可能性がありますが、それは伝えにくいです。

あなたは、実際のアプリケーション内のWebPACKを実行すると、あなたのmainは、webpack.config.jsに設定されているので、あなたはそれがノード・アプリケーションであるため、動作していないブラウザ、中に使用するためのWebPACK 自体をバンドルしようとしています。

上記の手順を完了し、technology-radarパッケージが既にBabelで処理されている場合は、sampleアプリケーションの設定は、すでに持っているものとほとんど同じです。