webpack 打包之后丢失方法

leavesdrift
  • 33

I want to make a Vue plugin by adding install function.
here is the entry point

import Timeline from './components/Timeline.vue'
import Graph2d from './components/Graph2d.vue'
import Graph3d from './components/Graph3d.vue'
import Network from './components/Network.vue'

const components = [
   Timeline,
   Graph2d,
   Graph3d,
   Network
]

export default {
    install(Vue, options = {}) {
        components.forEach(function(component) {
            Vue.component(component.name, component)
        })
    },
    Timeline,
    Graph2d,
    Graph3d,
    Network,
}

and here is my webpack config.js

const path = require('path');
const webpack = require('webpack');

const config = module.exports = {
  plugins: []
};

// Set context to root of project
config.context = path.resolve(__dirname, '..');

// Client entry
config.entry = {
  vue2vis: path.resolve(__dirname, '../src/main')
};

// Basic output config
config.output = {
  path: path.resolve(__dirname, '../dist'),
  filename: 'vue2vis.js',
  library: ["vue2vis"],
  libraryTarget: "umd",
};

config.externals = ['visjs', 'vue'];
// Resolver config
config.resolve = {
  extensions: ['.js', '.vue'],
  enforceExtension: false
};

config.resolveLoader = {
  modules: config.resolve.modules
};

config.module = {
  loaders: [
    {
      test: /\.vue$/,
      loader: 'vue-loader'
    },
    {
      test: /\.js$/,
      loader: 'babel-loader',
      // important: exclude files in node_modules, otherwise it's going to be really slow!
      exclude: /node_modules|vendor/
    },
    {
      test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
      loader: 'file-loader',
      exclude: /node_modules|vendor/,
      options: {
        name: 'images/[name].[ext]',
      }
    },
  ]
};
process.traceDeprecation = true;
if (process.env.NODE_ENV === 'production') {
  config.output.filename = "vue2vis.min.js"
  config.devtool = '#source-map';

  // Pass build environment inside bundle
  // This will strip comments in Vue code & hort-circuits all Vue.js warning code
  config.plugins.push(new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development')
  }));

  // The UglifyJsPlugin will no longer put loaders into minimize mode, and the debug option has been deprecated.
  config.plugins.push(new webpack.LoaderOptionsPlugin({
    minimize: true,
    debug: false
  }));

  // Minify with dead-code elimination
  config.plugins.push(new webpack.optimize.UglifyJsPlugin({
    compress: {warnings: false},
    sourceMap: true
  }));
} else {
  config.devtool = '#eval-source-map';
}

here is the build.sh

#!/usr/bin/env bash

DIR="$( cd "$( dirname "${BASH_SOURCE[0]}" )" && pwd )"
cd $DIR

echo "Building umd version"
export NODE_ENV=development
../node_modules/.bin/webpack --hide-modules --colors --progress --config webpack.js --env development --display-error-details

echo "Building umd minified version"
export NODE_ENV=production
../node_modules/.bin/webpack --hide-modules --colors --progress --config webpack.js --env production --display-error-details

but after build i lose install function which is exported in entry point...

回复
阅读 2.9k
1 个回答

用了es6语法,应该是没配置好bable,可以去官网看看每种babel 对应的es6语法

宣传栏