ES6 Vue Package Build Process

build.md

ES6 Vue Packages

All ES6 packages should be compiled down to ES5 packages. This is largely due to UglifyJS not yet supporting ES6.

Swizec Teller had a good write up here - https://swizec.com/blog/fun-surprise-uglifyjs-cant-es6/swizec/7272 but it did not play well with Vue.

Enter Webpack

Webpack seems to be the defacto standard for this stuff. We are going to reuse a majority of the code from vue-js-modal's build process.

Package.json

Using the following dev-dependencies in package.json

"devDependencies": {
    "babel-core": "^6.25.0",
    "babel-loader": "latest",
    "babel-preset-env": "^1.5.2",
    "cross-env": "^3.0.0",
    "css-loader": "^0.25.0",
    "file-loader": "^0.9.0",
    "node-sass": "^4.5.0",
    "sass-loader": "^5.0.1",
    "uglifyjs-webpack-plugin": "^0.4.6",
    "vue": "^2.2.6",
    "vue-hot-reload-api": "^2.0.8",
    "vue-loader": "^10.0.0",
    "vue-style-loader": "^2.0.0",
    "vue-template-compiler": "^2.1.0",
    "webpack": "^2.2.0",
    "webpack-dev-server": "^2.2.0",
    "webpack-merge": "^4.1.0"
},

Add the following scripts

"scripts": {
    "build": "webpack --config ./build/webpack.config.js --progress --hide-modules"
}

Add the following babel config:

"babel": {
    "presets": ["env"],
    "comments": false
}

Change main to "main": "dist/index.js",

Run npm install

Build config

mkdir build
curl https://gist.githubusercontent.com/tmyers273/1d0a020fcf61aaa13df8eda0fce702d9/raw > build/webpack.base.config.js
curl https://gist.githubusercontent.com/tmyers273/4b28a91e062337425164f434e632c605/raw > build/webpack.config.js

1 values by default - library

• library is the name of your npm library

Run

npm run build