Skip to content

Commit

Permalink
feat: add weex and web mode
Browse files Browse the repository at this point in the history
  • Loading branch information
sky committed Nov 27, 2018
1 parent bc3e34a commit 8dfa0e8
Show file tree
Hide file tree
Showing 5 changed files with 46 additions and 85 deletions.
1 change: 1 addition & 0 deletions .eslintrc
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@
"newline-after-var": "off",
"no-invalid-this": "off",
"no-unused-vars": "off",
"arrow-body-style": "off",
"quotes": [
"error",
"single"
Expand Down
112 changes: 34 additions & 78 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -26,110 +26,66 @@
## 安装

```bash
$ npm i easywebpack-weex --save
$ npm i easywebpack-weex --save-dev
```

## 使用

### 公共配置 `base.js`

```js
'use strict';
const path = require('path');
const WeexWebpack = require('easywebpack-weex');
const merge = WeexWebpack.merge;
const baseDir = path.join(__dirname, '../../../');
const webpackConfig = {
const weex = require('easywebpack-weex');
// 获取 webpack weex 配置
const webpackConfig = weex.getWeexWebpackConfig({
env: process.env.BUILD_ENV, // 支持 dev,test,local 模式
entry: {
include: 'page',
exclude: ['page/test'],
template: 'view/layout.html'
}
};
const WebpackBaseBuilder = WebpackBuilder => class extends WebpackBuilder {
constructor(config) {
super(merge(webpackConfig, config));
this.setAlias('app', 'test/web/framework/vue/app');
this.setAlias('component', 'test/web/component');
index: 'src/app.js'
}
};
module.exports = WebpackBaseBuilder;
```
});

### Weex Native 构建配置 `weex.js`
// 获取 webpack web 配置
const webpackConfig = weex.getWeexWebpackConfig({
entry: {
index: 'src/app.js'
}
});

```js
'use strict';
const WeexWebpack = require('easywebpack-weex');
const WebpackWeexBuilder = WeexWebpack.WebpackWeexBuilder;
const WebpackBaseBuilder = require('../base');
class WeexBuilder extends WebpackBaseBuilder(WebpackWeexBuilder) {
}
module.exports = new WeexBuilder().create();
// 获取 webpack weex 和 web 配置
const webpackConfig = weex.getWebpackConfig({
entry: {
index: 'src/app.js'
}
});
```

### Weex Web 构建配置 `web.js`

```js
'use strict';
const WeexWebpack = require('easywebpack-weex');
const WebpackWebBuilder = WeexWebpack.WebpackWebBuilder;
const WebpackBaseBuilder = require('../base');
class WeexWebBuilder extends WebpackBaseBuilder(WebpackWebBuilder) {
}
module.exports = new WeexWebBuilder().create();
```

### 构建入口 `build.js`
## 开发构建

```js
const WeexWebpack = require('easywebpack-weex');
const weexConfig = require('./weex');
const webConffig = require('./web');
const config = [weexConfig, webConffig];
- 使用 webpack-cli 开发构建服务

if (process.env.NODE_SERVER) {
// development mode: webpack building and start webpack hot server
WeexWebpack.server(config);
} else {
// build file to disk
WeexWebpack.build(config);
}
```bash
webpack --config webpack.config.js
```

### 命令行运行
- 使用 easywebpack 内置开发构建服务

- package.json 添加脚本配置

```js
// ${app_root}/package.json
{
"scripts": {
"build": "cross-env NODE_ENV=production node test/build",
"build-dev": "cross-env NODE_ENV=development node test/build",
"build-weex": "BUILD_ENV=weex npm run build",
"build-web": "BUILD_ENV=web npm run build",
"build-weex-dev": "BUILD_ENV=weex npm run build-dev",
"build-web-dev": "BUILD_ENV=web npm run build-dev",
"start" : "cross-env NODE_SERVER=true NODE_ENV=development node test/build"
}
const weex = require('easywebpack-weex');
if (process.env.NODE_ENV === 'development') {
// development mode: webpack building and start webpack hot server
weex.server(webpackConfig);
} else {
// build file to disk
weex.build(webpackConfig);
}
```

- 命令行运行

```bash
npm start
```


## 工程骨架

[easywebpack-weex-boilerplate](https://github.com/hubcarl/easywebpack-weex-boilerplate) Weex构建项目骨架
[easywebpack-weex-boilerplate](https://github.com/easy-team/easywebpack-weex-boilerplate) Weex构建项目骨架

![webpack-weex-compile](https://github.com/hubcarl/easywebpack-weex/blob/master/doc/images/webpack-weex-compile.png)
![webpack-weex-compile](https://github.com/easy-team/easywebpack-weex/blob/master/doc/images/webpack-weex-compile.png)

![webpack-weex-debug](https://github.com/hubcarl/easywebpack-weex/blob/master/doc/images/webpack-weex-debug.png)
![webpack-weex-debug](https://github.com/easy-team/easywebpack-weex/blob/master/doc/images/webpack-weex-debug.png)


## License
Expand Down
9 changes: 9 additions & 0 deletions index.js
Original file line number Diff line number Diff line change
Expand Up @@ -8,3 +8,12 @@ Object.assign(exports, EasyWebpack);
exports.getWebpackConfig = config => {
return EasyWebpack.WebpackBuilder.getWebpackConfig(config, [exports.WebpackWebBuilder, exports.WebpackWeexBuilder]);
};

exports.getWeexWebpackConfig = config => {
return EasyWebpack.WebpackBuilder.getWebpackConfig(config, [exports.WebpackWeexBuilder]);
};


exports.getWebWebpackConfig = config => {
return EasyWebpack.WebpackBuilder.getWebpackConfig(config, [exports.WebpackWebBuilder]);
};
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "easywebpack-weex",
"version": "3.5.0",
"version": "3.5.1",
"description": "基于 easywebpack 的 Weex Native 和 Weex Web 打包构建解决方案",
"keywords": [
"webpack",
Expand Down
7 changes: 1 addition & 6 deletions test/webpack.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
const path = require('path');
module.exports = {
framework: 'weex',
type: 'weex',
env: process.env.BUILD_ENV,
entry: {
include: 'test/web/page',
Expand All @@ -15,12 +16,6 @@ module.exports = {
framework: 'test/web/framework',
store: 'test/web/store'
},
install: {
check: true
},
plugins: {
npm: true
},
onWeb() {
this.addEntry('common', [path.join(this.config.baseDir, 'test/web/framework/weex/web.js')]);
}
Expand Down

0 comments on commit 8dfa0e8

Please sign in to comment.