Question

我创建并发布了我的第一个npm包。这个软件包包含了ES6语法的JS，并通过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包本身。该软件包的源代码可在https://github.com/raman-nbg/techradar的github上获得。 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

您似乎误解了发布和使用包的方式。

完全忽略Webpack，标准npm模块将main设置为包的根目录的JS文件，并且通常使用Babel npm的包> 发布之前。通常在发布technology-radar之前，您会使用babel-cli和

这样的包

babel src -d lib

将src目录中的所有内容编译到lib内的ES5中。然后您的package.json#main值应为

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

或任何包是您的包的概念根。在您的情况下，这可能是Radar.js，但很难说。

因为您的main设置为webpack.config.js，所以当您在实际应用程序中运行Webpack时，您正尝试将Webpack 本身捆绑在一起，以便在浏览器中使用不起作用，因为它是一个Node应用程序。

如果您已完成上述操作并且已使用Babel处理了technology-radar包，则sample应用程序的配置几乎就是您已有的。

从npm包导入ES6模块

1 个答案: