nodejs - не может использовать модуль из импортированного пакета - PullRequest
Новая
       20

nodejs - не может использовать модуль из импортированного пакета

0 голосов
/ 11 июня 2018

Я создаю пакет 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)

Может кто-нибудь подсказать мне?Спасибо.

Ответы [ 2 ]

0 голосов
/ 12 июня 2018

Наконец сделайте это: https://github.com/MoYummy/vue-top-down/tree/v0.0.1

Ключ должен построить commonjs, umd и esm для каждой среды выполнения.

npm: https://unpkg.com/vue-top-down@0.0.1/dist/

использование: https://moyummy.github.io/vue-top-down/example/

0 голосов
/ 11 июня 2018

Установите output.libraryTarget как umd в вашем webpack.config.js .По умолчанию libraryTarget установлено var.Возвращаемое значение присваивается переменной, его нельзя использовать внутри модуля 

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

Несколько целей Хотя веб-пакет не поддерживает передачу нескольких строк в свойство цели, вы можете создатьИзоморфная библиотека путем объединения двух отдельных конфигураций: Несколько целей 

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];
...