国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

Omi原理-環境搭建

lncwwn / 3234人閱讀

摘要:相關依賴有和其余都是單元測試相關依賴注意,這里使用了。因為使用框架支持和使用是為了在單元測試里面使用的和等語法。腳本其中生成目錄的文件執行單元測試編譯的編譯的在中,會根據去設置不同的入口文件。

環境搭建

Omi框架使用 Webpack + ES6 的方式去開發;使用karma+jasmine來作為Omi的測試工具。

Karma介紹

Karma是一個基于Node.js的JavaScript測試執行過程管理工具(Test Runner)。該工具可用于測試所有主流Web瀏覽器,也可集成到CI(Continuous integration)工具,也可和其他代碼編輯器一起使用。這個測試工具的一個強大特性就是,它可以監控(Watch)文件的變化,然后自行執行。但是集成到travis ci要把singleRun設置成true,讓其只執行一遍。

Jasmine介紹

Jasmine 是一款 JavaScript BDD(行為驅動開發)測試框架,它不依賴于其他任何 JavaScript 組件。它有干凈清晰的語法,讓您可以很簡單的寫出測試代碼。

開發依賴包

在package.json中,有如下配置:

  "devDependencies": {
    "babel-core": "^6.0.20",
    "babel-loader": "^6.0.1",
    "babel-preset-es2015": "^6.0.15",
    "node-libs-browser": "^0.5.3",
    "webpack": "^1.14.0",
    "jasmine-core": "^2.5.2",
    "karma": "^1.3.0",
    "karma-chrome-launcher": "^2.0.0",
    "karma-jasmine": "^1.1.0",
    "karma-webpack": "^1.8.1"
  }

ES6+相關依賴有babel-core、babel-loader和babel-preset-es2015

在webpack.config.js中配置js文件使用babel-loader編譯。

loaders: [
    {
        loader: "babel-loader",
        test: /.js$/,
        query: {
            presets: "es2015",
        }
    }
]

webpack相關依賴有node-libs-browser和webpack

其余都是單元測試相關依賴

    注意,這里使用了karma-webpack。因為使用Omi框架支持ES6+和ES5,使用karma-webpack是為了在單元測試里面使用ES6+的import和Class等語法。

在karma.conf.js中配置webpack:

    webpack: webpackConfig,
    webpackMiddleware:{
      noInfo:false
    },
    plugins: [
        "karma-webpack",
        "karma-jasmine",
        "karma-chrome-launcher"
    ]

具體配置看test目錄下的karma.conf.js和webpack.test.config.js便可。

注意,karma.conf.js需要設置

// if true, Karma captures browsers, runs the tests and exits
singleRun: true,

不然,travis ci腳本執行的時候不會中斷導致執行超時異常。

npm 腳本
  "scripts": {
    "build": "webpack -w",
    "test": "karma start test/karma.conf.js",
    "hello": "webpack -w",
    "todo": "webpack -w"
  }

其中:

npm run build : 生成dist目錄的omi.js文件

npm run test : 執行單元測試

npm run hello : 編譯hello的demo

npm run todo : 編譯todo的demo

在webpack.config.js中,會根據 process.env.npm_lifecycle_event去設置不同的入口文件。所以同樣是執行webpack -w,執行結果可以不一樣。

來看下build的相關webpack配置:

if(ENV === "build"){
    config = {
        entry: {
            omi: "./src/index.js"
        },
        output: {
            path: "dist/",
            library:"Omi",
            libraryTarget: "umd",
            filename:  "[name].js"
        },

這里把libraryTarget設置成了umd,webpack會幫助我們build出umd的Omi。

如果是打包demo(npm run hello 和 npm run todo)的話,會進入下面的條件判斷:

else {
    config.entry = "./example/" + ENV + "/main.js";
    config.output.path = "./example/" + ENV + "/";
}

會去example下對應的目錄查找main.js作為webpack入口文件。

這里可以看到,我們不僅用webpack build出Omi框架,也使用webpack build所有demo。
詳細配置參考webpack.config.js的配置。

參考文檔

http://www.cnblogs.com/cqhaibin/p/5867125.html

https://karma-runner.github.io/latest/intro/installation.html

https://karma-runner.github.io/latest/intro/configuration.html

招募計劃

Omi的Github地址https://github.com/AlloyTeam/omi

如果想體驗一下Omi框架,請點擊Omi Playground

如果想使用Omi框架,請閱讀 Omi使用文檔

如果想一起開發完善Omi框架,有更好的解決方案或者思路,請閱讀 從零一步步打造web組件化框架Omi

關于上面的兩類文檔,如果你想獲得更佳的閱讀體驗,可以訪問Docs Website

如果你懶得搭建項目腳手架,可以試試Scaffolding for Omi,npm安裝omis便可

如果你有Omi相關的問題可以New issue

如果想更加方便的交流關于Omi的一切可以加入QQ的Omi交流群(256426170)

文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。

轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/81447.html

相關文章

  • Omi原理-Hello Omi

    摘要:注意,這里目前沒有引入,不管第幾次渲染都是無腦設置,復雜結構對瀏覽器的開銷很大,這里后續會引入。整合這里把給直接暴露在下,因為每個組件都生成了唯一的,后續實現事件作用域以及對象實例獲取都要通過下的獲取。 Hello Omi Omi框架的每個組件都繼承自Omi.Component,本篇會去完成Omi的Component的基本錐形,讓其能夠渲染第一個組件。 omi.js實現 var Omi...

    王巖威 評論0 收藏0
  • 2017年試試Web組件化框架Omi

    摘要:不用擔心組件的會污染組件外的會幫你處理好一切更自由的更新,每個組件都有方法,自由選擇時機進行更新。通過安裝點擊這里在線試試你可以使用來生成組件標簽用于嵌套。點擊這里試試寫程序加入吧 Omi Open and modern framework for building user interfaces. Omi的Github地址https://github.com/AlloyTeam/o...

    JowayYoung 評論0 收藏0

發表評論

0條評論

lncwwn

|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<