node.js - nodejs - 无法使用导入包中的模块

Question

我创建了一个 npm 包 https://www.npmjs.com/package/vue-top-down-test ，它只导出两个对象 VueTopDown 和 VueTopDownItem。

import { VueTopDown } from './vue-top-down'
import { VueTopDownItem } from './vue-top-down-item'

module.exports = {
  VueTopDown,
  VueTopDownItem
}

但是，我未能在我的演示中使用(甚至只是打印)它们 https://github.com/MoYummy/vue-top-down/tree/master/docs/demo-node .

import * as VTD from 'vue-top-down-test'
import Vue from 'vue'

console.log(Vue)
console.log(VTD)

有人能给我一些线索吗？谢谢。

Answer 1

在 webpack.config.js 中将 output.libraryTarget 设置为 umd。默认 libraryTarget 设置为 var。返回值被分配给一个变量，它不能在模块内部使用

  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].js',
    library: 'VueTopDown',
    libraryTarget: 'umd',
    umdNamedDefine: true
  }

多个目标 尽管 webpack 不支持将多个字符串传递到目标属性中，但您可以通过捆绑两个单独的配置来创建同构库:Multiple Targets

const path = require('path');
const serverConfig = {
  target: 'node',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'lib.node.js'
  }
  //…
};

const clientConfig = {
  target: 'web', // <=== can be omitted as default is 'web'
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'lib.js'
  }
  //…
};

module.exports = [ serverConfig, clientConfig ];

修改了webpack.config.js供您引用

const path = require('path');
const webpack = require('webpack');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');

const serverConfig = {
  mode: 'production',
  target: 'node',
  entry: {
    'vue-top-down': './src/index.js',
    'vue-top-down.min': './src/index.js'
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].js',
    library: 'VueTopDown',
    libraryTarget: 'umd'
  },
  module: {
    rules: [{
      test: /\.js$/,
      loader: 'babel-loader',
      query: {
        presets: ['env']
      }
    }]
  },
  stats: {
    colors: true
  },
  devtool: 'source-map',
  optimization: {
    minimizer: [
      new UglifyJsPlugin({
        test: /\.min\.js$/
      })
    ]
  },
  plugins: [
    new CleanWebpackPlugin([
      path.resolve(__dirname, 'dist')
    ]),
  ]
};

const clientConfig = {
  mode: 'production',
  target: 'web',
  entry: {
    'vue-top-down': './src/index.js',
    'vue-top-down.min': './src/index.js'
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].web.js',
    library: 'VueTopDown'
  },
  module: {
    rules: [{
      test: /\.js$/,
      loader: 'babel-loader',
      query: {
        presets: ['env']
      }
    }]
  },
  stats: {
    colors: true
  },
  devtool: 'source-map',
  optimization: {
    minimizer: [
      new UglifyJsPlugin({
        test: /\.min\.js$/
      })
    ]
  },
  plugins: [
    new CleanWebpackPlugin([
      path.resolve(__dirname, 'dist')
    ]),
  ]
};

module.exports = [serverConfig, clientConfig];