Импортировать модуль ES6 из пакета npm

Я создал и опубликовал свой первый пакет npm. Этот пакет содержит JS в синтаксисе ES6 и переносится на ES5 с помощью webpack и babel.

Теперь я хочу использовать этот пакет 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 доступен по адресу https://www.npmjs.com/package/technology-radar < / а>.

Класс, который следует экспортировать (как определено как точка входа в webpack.config.js пакета), определяется src / Radar.js с export default class Radar { ... }. Точка входа определяется как

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

person Raman    schedule 03.10.2017    source источник
comment
Этот модуль предназначен для использования на узле или в браузере? Если для работы он полагается на модуль fs, рассмотрите возможность добавления параметра target: 'node' в конфигурацию вашего веб-пакета, чтобы убедиться, что веб-пакет игнорирует встроенные модули, такие как fs, path и т. Д.   -  person kharhys    schedule 03.10.2017


Ответы (1)


Похоже, вы неправильно понимаете, как работает публикация и использование пакетов.

Полностью игнорируя Webpack, в стандартном npm модуле main установлен файл JS, который является корнем вашего пакета, и обычно пакеты, опубликованные в npm, компилируются с помощью Babel перед публикацией. Обычно перед публикацией technology-radar используется пакет типа babel-cli с

babel src -d lib

для компиляции всего, что находится в каталоге src, в ES5 внутри lib. Тогда ваше значение package.json#main должно быть

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

или какой бы пакет ни был концептуальным корнем вашего пакета. В вашем случае это могло быть Radar.js, но это сложно сказать.

Поскольку ваш main установлен на webpack.config.js, когда вы запускаете Webpack внутри своего фактического приложения, вы пытаетесь связать Webpack сам для использования в браузере, что не работает, потому что это приложение Node.

Если вы выполнили описанное выше и у вас есть technology-radar пакет, который уже обработан с помощью Babel, конфигурация вашего sample приложения в значительной степени похожа на то, что у вас уже есть.

person loganfsmyth    schedule 03.10.2017
comment
Спасибо! Меня действительно смущает комбинация npm, webpack, babel ... Я изменил значение в package.json # main. Теперь я могу собрать / транспилировать свой образец приложения. Но в браузере я получаю сообщение об ошибке Uncaught TypeError: _technologyRadar2.default is not a constructor для строки var radar = new Radar("#techradarContainer");. Я думаю, что у меня есть ошибка при экспорте класса Radar (самого пакета npm) или при его импорте в пример приложения. - person Raman; 03.10.2017