nodejs - 无法使用导入包中的模块答案

【问题标题】：nodejs - cannot use module from imported packagenodejs - 无法使用导入包中的模块
【发布时间】：2018-06-12 17:52:19
【问题描述】：

我创建了一个 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)

谁能给我一些线索？谢谢。

【问题讨论】：

标签： node.js npm webpack babeljs

【解决方案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];

【讨论】：

太好了，谢谢！但是在浏览器中调用会失败：https://moyummy.github.io/vue-top-down/docs/demo-browser-script.html。我需要单独构建两个js吗？
多个目标的更新答案

【解决方案2】：

终于成功了：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/

【讨论】：