RequirePack
bundle tool use requirejs
intall
npm install -g sr-require-pack
how to use it
- init
after installed, you can use 'rpack' command
# init with
rpack init
#
mkdir src
cd src && touch index.html && touch index.js && touch index.less
index.html content
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" require-pack href="./index.less">
</head>
<body>
<h1>HELLO WORLD</h1>
<div id="app" v-cloak>
hello {{ name }}
</div>
<img src='./images/logo.png' require-pack>
<a href='./images/logo.png' require-pack>
<script require-pack src="./index.js"></script>
</body>
</html>
index.js content
import Vue from 'vue'
import 'fancybox'
$('.fancy').fancybox()
new Vue({
el: '#app',
data: {
name: 'lee'
}
})
index.less content
body {
background: lightblue;
}
- in project root folder,install required dependencies
npm install vue fancybox@2.15 -S
- use it in development mode
rpack dev
- with local server,by example you use serve
now can modify js file or html file to see liveReload
serve dist
- deploy
it will minify css && js
rpack build
require-pack.build.js
module.exports = {
srcDir: './src',
distDir: './dist',
html: 'src/**/*.html',
publicUrl: '/',
publicCdnUrls:['//cdn1.cn/','//cdn2.cn/']
livePort: 0
}
require-pack.web.js
this config file is extends standard requirejs config
module.exports = {
paths: {
vue: 'vue/dist/vue',
jquery: './lib/jquery.js',
fancybox: 'fancybox/dist/js/jquery.fancybox',
fancybox_css: 'fancybox/dist/css/jquery.fancybox.css'
},
shim: {
fancybox: ['jquery', 'fancybox_css']
},
production: {
paths: {
vue: 'vue/dist/vue.min',
'babel-polyfill': 'babel-polyfill/dist/polyfill.min.js'
}
}
}