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 ## this command will auto generate 'require-pack.web.js' && 'require-pack.build.js'
- create source directory
mkdir srccd src && touch index.html && touch index.js && touch index.less
index.html content
<!-- resolve a link href --> HELLO WORLD hello {{ name }} <!-- resolve img --> <!-- resolve a link resource --> <!-- resolve a script src -->
index.js content
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
moduleexports = // source folder srcDir: './src' // dest folder distDir: './dist' // which html will be require-packed,support glob path html: 'src/**/*.html' // all asset public prefix url publicUrl: '/'// use cdn publicUrls to fallback resources publicCdnUrls:'//cdn1.cn/''//cdn2.cn/' // development mode liveReload port ,0 means random port livePort: 0
require-pack.web.js
this config file is extends standard requirejs config
moduleexports = // all external module path map paths: vue: 'vue/dist/vue' jquery: './lib/jquery.js' fancybox: 'fancybox/dist/js/jquery.fancybox' fancybox_css: 'fancybox/dist/css/jquery.fancybox.css' // same as requirejs shim config,configure module dep relationships and exports shim: fancybox: 'jquery' 'fancybox_css' // production config,it will merge basic config production: paths: vue: 'vue/dist/vue.min' 'babel-polyfill': 'babel-polyfill/dist/polyfill.min.js'