Shulou(Shulou.com)06/01 Report--

Environment building

The Omi framework is developed using Webpack + ES6; karma+jasmine is used as a testing tool for Omi.

Karma introduction

Karma is a Node.js-based JavaScript test execution process management tool (Test Runner). This tool can be used to test all major Web browsers, integrate into the CI (Continuous integration) tool, or work with other code editors. A powerful feature of this testing tool is that it can monitor changes in (Watch) files and then execute them on its own. But to integrate into travis ci, set singleRun to true and make it execute only once.

Jasmine introduction

Jasmine is a JavaScript BDD (behavior driven Development) testing framework that does not rely on any other JavaScript components for new waterway training. It has a clean and clear syntax that allows you to easily write test code.

Development dependency package

In package.json, the configuration is as follows:

"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+-related dependencies include babel-core, babel-loader and babel-preset-es2015

Configure the js file to be compiled using babel-loader in webpack.config.js.

Loaders: [{loader: 'babel-loader', test: /\ .js $/, query: {presets:' es2015',}}]

Webpack-related dependencies are node-libs-browser and webpack

The rest are unit test related dependencies

Notice that karma-webpack is used here. Because the Omi framework supports ES6+ and ES5, karma-webpack is used to use ES6+ 's import and Class syntax in unit tests.

Configure webpack in karma.conf.js:

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

For specific configuration, please see karma.conf.js and webpack.test.config.js under the test directory.

Note that karma.conf.js needs to be set

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

Otherwise, the execution of the travis ci script will not be interrupted, resulting in an execution timeout exception.

Npm script "scripts": {"build": "webpack-w", "test": "karma start test/karma.conf.js", "hello": "webpack-w", "todo": "webpack-w"}

Where:

Npm run build: generate the omi.js file of the dist directory

Npm run test: performing unit tests

Npm run hello: demo for compiling hello

Npm run todo: demo for compiling todo

In webpack.config.js, different entry files are set according to process.env.npm_lifecycle_event. So if you also execute webpack-w, the execution results can be different.

Let's take a look at the relevant webpack configuration of build:

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

Setting libraryTarget to umd,webpack will help us build the Omi of umd.

If you package demo (npm run hello and npm run todo), you will enter the following criteria:

Else {config.entry ='. / example/' + ENV +'/ main.js'; config.output.path ='. / example/' + ENV +'/;}

Will go to the corresponding directory under example to find main.js as the webpack entry file.

As you can see here, we not only use webpack build to produce the Omi framework, but also use all the demo of webpack build.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.