requirejs 使用實例r.js打包
阿新 • • 發佈：2017-12-07
fun ima 相關 官方 文檔 完成 流程 min height
在這裏，請先看基礎文章與相關技術文檔：
- 安裝：
npm init npm install requirejs --save npm install jquery@1.11.1 --save 創建基本目錄： js/main.js&test.js css/index.css index.html build.js copy requirejs目錄下的r.js到根目錄 創建導出目錄：one 測試目錄創建完成！
- index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="css/index.css"> </head> <body> <iframe class="iframe" src="http://baidu.com" frameborder="0" height="300"></iframe> <script type="text/javascript" defer anync="true" src="node_modules/requirejs/require.js" data-main="js/main"></script> </body> </html> - build.js
//參考配置目錄 http://www.yfznw.com/node/22
({ dir:‘./one‘,//輸出路徑 paths:{ jquery:‘node_modules/jquery/dist/jquery.min‘, test:‘js/test‘, index:‘css/index.css‘ }, name: ‘js/main‘,// 模塊入口 optimize: ‘none‘,//是否壓縮 默認是壓縮的，去掉不要就是壓縮 }) - main.js
require.config({ baseUrl:
‘node_modules/‘, paths:{ ‘jquery‘:‘jquery/dist/jquery.min‘, ‘js‘:‘../js‘ } }); require([‘jquery‘,‘js/test‘],function($,test) { console.log($); test.one(); }); - test.js
define([],function() { var testing = {}; testing.one = function() { console.log(
‘module testing‘); }; return testing }); - index.css (主要只是存在而己，設定了流動條樣式)
@charset "utf-8"; *::-webkit-scrollbar{width:2px;height:12px;} *::-webkit-scrollbar-button:start:decrement, ::-webkit-scrollbar-button:end:increment{width:0;height:0;} *::-webkit-scrollbar-button:vertical:increment{background:transparent;} *::-webkit-scrollbar-track-piece:vertical{background:#DFE7EF;} *::-webkit-scrollbar-track-piece:vertical:hover{background:#DFE7EF;} *::-webkit-scrollbar-track-piece:horizontal{background-color:transparent;} *::-webkit-scrollbar-thumb:vertical{height:100px;background:rgba(110,146,182,.5);} *::-webkit-scrollbar-thumb:vertical:hover{background:rgba(110,146,182,.4);} *::-webkit-scrollbar-thumb:horizontal{width:80px;height:10px;background-color:#ccc;}
- 目錄截圖
- 生成r.js打包目錄
//切換到根目錄 執行：node r.js -o build.js
- 效果：
新目錄one就是一個新的站點，那麽流程到此結束；可看到與未打包時一樣的結果；但是，相對而言請求被打包了，文件被打包了，那麽還有更多 的細節，請查看官方文檔 ；
requirejs 使用實例r.js打包