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" 
}; 

샘플/

import Radar from 'technology-radar'; 

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

사용 또는 NPM 패키지 자체가 있는지 모르겠다을 app.js. 패키지의 소스 코드는 github https://github.com/raman-nbg/techradar에 있습니다. npm 패키지는 https://www.npmjs.com/package/technology-radar에 있습니다.

내보낼 클래스 (패키지의 webpack.config.js에서 엔트리 포인트로 정의 됨)는 export default class Radar { ... } 인 src/Radar.js로 정의됩니다. 진입 점은 다음과 같이 정의됩니다.

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

Answer 1

게시 및 패키지 사용 방법을 오해하는 것 같습니다.

완전히 웹팩을 무시하고, 표준 npm 모듈은 패키지의 루트 인 JS 파일에 main 설정을 가지고 있으며, 일반적으로이 출판되기 전에 바벨 로 컴파일 npm에 게시 된 패키지. 일반적으로 technology-radar를 게시하기 전에, 당신은 lib 내부 ES5에 src 디렉토리에 모든 것을 컴파일

babel src -d lib 

와 babel-cli 같은 패키지를 사용하십시오. 그런 다음 package.json#main 값 중 패키지

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

또는 패키지의 개념 루트해야 . 귀하의 경우에는 Radar.js이 될 수 있지만 말할 수 없습니다. 당신이 당신의 실제 응용 프로그램 내에서 웹팩 실행할 때 main이 webpack.config.js로 설정되어 있기 때문에

, 당신은 노드 응용 프로그램이기 때문에 작동하지 않는 브라우저에서에 사용하기 위해 웹팩 자체 번들 위해 노력하고 있습니다.

위의 작업을 수행하고 Babel로 이미 처리 된 technology-radar 패키지가있는 경우 sample 응용 프로그램의 구성은 이미 갖고있는 것입니다.