大家好！上篇文章已經介紹了搭建文件夾，以及加載js文件。現在講一下加載css ,以及對baseUrl的理解

1.對項目結構的認知

一個項目的結構是根據項目的架構來決定的，當然也可以做到更智能，但是意義不大。下邊看一下我的結構

我用到第三方庫（js），未編譯的es6代碼（test），編譯後的es5代碼（src），樣式表文件（css）。項目中用到了require css.js用來加載css文件。

安裝插件的方式舉個例子 npm install --save-dev babel-plugins-transform-es2015-classes

2.常用babel工具

• check-es2015-constants // 檢驗const常量是否被重新賦值
• transform-es2015-arrow-functions // 編譯箭頭函數
• transform-es2015-block-scoped-functions // 函數聲明在作用域內
• transform-es2015-block-scoping // 編譯const和let
• transform-es2015-classes // 編譯class
• transform-es2015-computed-properties // 編譯計算對象屬性
• transform-es2015-destructuring // 編譯解構賦值
• transform-es2015-duplicate-keys // 編譯對象中重復的key，其實是轉換成計算對象屬性
• transform-es2015-for-of // 編譯for...of
• transform-es2015-function-name // 將function.name語義應用於所有的function
• transform-es2015-literals // 編譯整數(8進制/16進制)和unicode
• transform-es2015-modules-commonjs // 將modules編譯成commonjs
• transform-es2015-modules-amd // 將modules編譯成amdjs
• transform-es2015-object-super // 編譯super
• transform-es2015-parameters // 編譯參數，包括默認參數，不定參數和解構參數
• transform-es2015-shorthand-properties // 編譯屬性縮寫
• transform-es2015-spread // 編譯展開運算符
• transform-es2015-sticky-regex // 正則添加sticky屬性
• transform-es2015-template-literals // 編譯模版字符串
• transform-es2015-typeof-symbol // 編譯Symbol類型
• transform-es2015-unicode-regex // 正則添加unicode模式
• transform-regenerator // 編譯generator函數

3.載入css.js文件

　　首先以圖中index.html為例，頁面中引入main.js ，main.js加載在頁面中，其實這個時候所有的相對路徑使以html文件為標準的，並不是main.js

項目中不希望main.js每次都被編譯，而且要公用main入口文件（動態改變baserl的用法會在下篇文章中講解），所以被放在js文件夾中。動態加載文件，需要計算文件名。對應關心，此處以簡例。

此處的page指向login.js 內容如下，引入文件就用import了

baseUrl 將目錄指向根目錄，index所在的頁面。加載css要用到css.js，使用形式已經寫了。想讓css的頁面效果先體驗出來，不是頁面變形，所以將js文件的引入放到css請求的回調函數裏。

通過baseUrl將相對路徑已經定位到項目根目錄，所以之後使用，直接使用文件夾名字就可以了。

下一步把 【page,styles】,改成動態獲取了，下篇文章具體講解使用。

es6+require混合開發，兼容es6 module，import,export之 加載css及公用date-main