alibaba · yacheng · Apr 25, 2019 · Mar 5, 2019 · Mar 5, 2019 · Mar 6, 2019
diff --git a/packages/rax-cli/README.md b/packages/rax-cli/README.md
@@ -68,3 +68,21 @@ $ rax init <ProjectName> [--verbose]
         └── page2.json
 ```
 
+* Componen Project
+```
+.
+├── package.json
+├── .gitignore
+├── .eslintignore
+├── .travis.yml
+├── public
+│   └── index.html
+├── demo
+│   └── index.js
+└── src
+    ├── __tests__
+    │   └── index.js
+    ├── index.d.ts
+    └── index.js
+```
+
diff --git a/packages/rax-cli/bin/rax.js b/packages/rax-cli/bin/rax.js
@@ -135,6 +135,10 @@ function askProjectInformaction(name, verbose) {
         {
           name: 'MiniApp',
           value: 'miniapp'
+        },
+        {
+          name: 'Component',
+          value: 'component'
         }
       ],
       default: 'webapp'

diff --git a/packages/rax-cli/src/generator/component/README.md b/packages/rax-cli/src/generator/component/README.md
@@ -0,0 +1,47 @@
+## <%= answers.name%>
+<%= answers.description %>
+
+## Install
+
+```
+$ npm install <%= answers.name%> --save
+```
+
+## Import
+
+```
+import MyComponent from '<%= answers.name%>';
+```
+
+## API说明
+
+### Props
+
+|name|type|default|describe|
+|:---------------|:--------|:----|:----------|
+|name|String|''|describe|
+
+### Function
+
+|name|param|return|describe|
+|:---------------|:--------|:----|:----------|
+|name|Object|/|describe|
+
+## Example
+
+```
+import {createElement, Component, render} from 'rax';
+import View from 'rax-view';
+
+class App extends Component {
+  render() {
+    return (
+      <View>
+      	{ /* your code */ } 
+      </View>
+    );
+  }
+}
+
+render(<App />);
+```
diff --git a/packages/rax-cli/src/generator/component/_eslintignore b/packages/rax-cli/src/generator/component/_eslintignore
@@ -0,0 +1,5 @@
+node_modules
+lib
+dist
+build
+coverage
diff --git a/packages/rax-cli/src/generator/component/_gitignore b/packages/rax-cli/src/generator/component/_gitignore
@@ -0,0 +1,11 @@
+*.swp
+*.log
+
+.DS_Store
+.idea/
+package-lock.json
+coverage/
+node_modules/
+build/
+dist/
+lib/
diff --git a/packages/rax-cli/src/generator/component/_travis.yml b/packages/rax-cli/src/generator/component/_travis.yml
@@ -0,0 +1,14 @@
+sudo: required
+
+language: node_js
+
+before_install:
+  - npm i -g npm@6
+
+node_js:
+  - "8"
+  - "11"
+
+script:
+  - npm run lint
+  - npm run test
diff --git a/packages/rax-cli/src/generator/component/demo/index.js b/packages/rax-cli/src/generator/component/demo/index.js
@@ -0,0 +1,5 @@
+import {createElement, render} from 'rax';
+import * as DriverDOM from 'driver-dom';
+import App from '../src/index';
+
+render(<App />, document.body, { driver: DriverDOM });
diff --git a/packages/rax-cli/src/generator/component/package.json b/packages/rax-cli/src/generator/component/package.json
@@ -0,0 +1,31 @@
+{
+  "name": "__YourProjectName__",
+  "version": "0.0.1",
+  "description": "",
+  "author": "__AuthorName__",
+  "main": "src/index.js",
+  "scripts": {
+    "start": "rax-scripts start --type 'component' -p 8000",
+    "build": "rax-scripts build --type 'component'",
+    "test": "rax-scripts test --type 'component'",
+    "lint": "rax-scripts lint --type 'component'"
+  },
+  "keywords": [
+    "Rax",
+    "rax-component"
+  ],
+  "engines": {
+    "npm": ">=3.0.0"
+  },
+  "dependencies": {
+  },
+  "peerDependencies": {
+    "rax": "^1.0.0"
+  },
+  "devDependencies": {
+    "rax": "^1.0.0",
+    "rax-scripts": "^1.2.0",
+    "driver-dom": "^1.0.0",
+    "rax-test-renderer": "^1.0.0"
+  }
+}
diff --git a/packages/rax-cli/src/generator/component/public/index.html b/packages/rax-cli/src/generator/component/public/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, minimum-scale=1, user-scalable=no">
+  <title>Rax Component Demo</title>
+  <script>
+  	(function(global){if(global.define){return}var modules={};var inGuard=false;function def(id,deps,factory){if(deps instanceof Function){factory=deps;deps=[]}modules[id]={factory:factory,deps:deps,module:{exports:{}},isInitialized:false,hasError:false,}}function req(id){if(id.indexOf("@weex-module")===0){return{}}var originId=id;var mod=modules[id];if(!mod){id=id+"/index";mod=modules[id]}if(mod&&mod.isInitialized){return mod.module.exports}return requireImpl(id,originId)}function requireImpl(id,originId){if(global.ErrorUtils&&!inGuard){inGuard=true;var returnValue;try{returnValue=requireImpl.apply(this,arguments)}catch(e){global.ErrorUtils.reportFatalError(e)}inGuard=false;return returnValue}var mod=modules[id];if(!mod){throw new Error('Requiring unknown module "'+originId+'"')}if(mod.hasError){throw new Error('Requiring module "'+originId+'" which threw an exception')}try{mod.isInitialized=true;mod.factory(req,mod.module.exports,mod.module)}catch(e){mod.hasError=true;mod.isInitialized=false;throw e}return mod.module.exports}global.define=def;global.require=req})(this||typeof global==="object"&&global||typeof window==="object"&&window);
+  </script>
+</head>
+<body>
+</body>
+</html>
diff --git a/packages/rax-cli/src/generator/component/src/__tests__/index.js b/packages/rax-cli/src/generator/component/src/__tests__/index.js
@@ -0,0 +1,10 @@
+/* eslint-env jest */
+import { createElement } from 'rax';
+import renderer from 'rax-test-renderer';
+import MyComponent from '../';
+
+describe('MyComponent', () => {
+  it('typeof MyComponent is "function"', () => {
+    expect(typeof MyComponent).toEqual('function');
+  });
+});
diff --git a/packages/rax-cli/src/generator/component/src/index.d.ts b/packages/rax-cli/src/generator/component/src/index.d.ts
diff --git a/packages/rax-cli/src/generator/component/src/index.js b/packages/rax-cli/src/generator/component/src/index.js
@@ -0,0 +1,21 @@
+import { createElement } from 'rax';
+
+const styles = {
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center'
+  },
+  containerBody: {
+    fontSize: 40,
+    color: '#999'
+  }
+};
+
+export default (props) => {
+  return (
+    <div style={styles.container}>
+      <div style={styles.containerBody}>hello world</div>
+    </div>
+  );
+};
diff --git a/packages/rax-scripts/bin/rax-scripts-lint.js b/packages/rax-scripts/bin/rax-scripts-lint.js
@@ -0,0 +1,12 @@
+#!/usr/bin/env node
+'use strict';
+const program = require('commander');
+const optionsAttachToEnv = require('../src/config/optionsAttachToEnv');
+
+program
+  .action((cmd) => {
+    optionsAttachToEnv(cmd);
+    require('../src/lint')();
+  });
+
+program.parse(process.argv);
diff --git a/packages/rax-scripts/bin/rax-scripts-test.js b/packages/rax-scripts/bin/rax-scripts-test.js
@@ -0,0 +1,12 @@
+#!/usr/bin/env node
+'use strict';
+const program = require('commander');
+const optionsAttachToEnv = require('../src/utils/optionsAttachToEnv');
+
+program
+  .action((cmd) => {
+    optionsAttachToEnv(cmd);
+    require('../src/jest')();
+  });
+
+program.parse(process.argv);
diff --git a/packages/rax-scripts/bin/rax-scripts.js b/packages/rax-scripts/bin/rax-scripts.js
@@ -8,4 +8,6 @@ program
   .usage('<command> [options]')
   .command('build', 'Build project in production mode')
   .command('start', 'Start a web server in development mode (hot-reload and inline-module-source-map is enable default)')
+  .command('lint', 'Lint for source  (only support component now)')
+  .command('test', 'Testing use jest(only support component now)')
   .parse(process.argv);
diff --git a/packages/rax-scripts/package.json b/packages/rax-scripts/package.json
@@ -32,6 +32,15 @@
     "@babel/preset-flow": "7.0.0",
     "@babel/preset-react": "7.0.0",
     "@babel/runtime": "^7.2.0",
+    "eslint": "^5.10.0",
+    "eslint-plugin-import": "^2.14.0",
+    "eslint-plugin-react": "~7.11.1",
+    "babel-preset-rax": "^1.0.0-beta.0",
+    "babel-jest": "^23.6.0",
+    "babel-eslint": "10.0.1",
+    "jest": "^23.6.0",
+    "jest-cli": "^24.7.1",
+    "jest-localstorage-mock": "^2.3.0",
     "address": "^1.0.1",
     "autoprefixer": "^9.4.3",
     "babel-core": "^7.0.0-bridge.0",

diff --git a/packages/rax-scripts/src/build.js b/packages/rax-scripts/src/build.js
@@ -33,6 +33,7 @@ function buildCompiler(config) {
 }
 
 const MINIAPP = 'miniapp';
+const COMPONENT = 'component';
 const webpackConfigMap = {
   webapp: './config/webapp/webpack.config.prod',
   weexapp: './config/weexapp/webpack.config.prod',
@@ -44,7 +45,7 @@ module.exports = function build(type = 'webapp') {
 
   if (type === MINIAPP) {
     jsx2mp(pathConfig.appDirectory, pathConfig.appDist, false);
-  } else if (appPackage.keywords && appPackage.keywords.indexOf('rax-component')) { // build component
+  } else if (type === COMPONENT) { // build component
     var webpackConfigComponentDistProd = require(webpackConfigMap.component);
     componentCompiler(appPackage.name);
     rimraf(pathConfig.appDist, function(err) {

diff --git a/packages/rax-scripts/src/config/component/webpack.config.base.js b/packages/rax-scripts/src/config/component/webpack.config.base.js
@@ -0,0 +1,86 @@
+'use strict';
+/* eslint no-console: 0 */
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const RaxWebpackPlugin = require('rax-webpack-plugin');
+const webpackConfig = require('../webpack.config');
+const pathConfig = require('../path.config');
+const babelConfig = require('../babel.config');
+
+babelConfig.presets.push([
+  require.resolve('@babel/preset-react'), {
+    'pragma': 'createElement',
+    'pragmaFrag': 'Fragment'
+  }
+]);
+
+babelConfig.plugins.push(
+  require.resolve('babel-plugin-transform-jsx-stylesheet'),
+  require.resolve('rax-hot-loader/babel')
+);
+
+module.exports = {
+  mode: webpackConfig.mode,
+  context: webpackConfig.context,
+  // Compile target should "web" when use hot reload
+  target: webpackConfig.target,
+  entry: webpackConfig.entry,
+  output: Object.assign({
+    pathinfo: true,
+  }, webpackConfig.output),
+
+  resolve: webpackConfig.resolve,
+
+  plugins: [
+    new RaxWebpackPlugin({
+      target: 'bundle',
+      externalBuiltinModules: false,
+    }),
+    // Generates an `index.html` file with the <script> injected.
+    new HtmlWebpackPlugin({
+      inject: true,
+      template: pathConfig.appHtml,
+    }),
+    webpackConfig.plugins.define,
+    webpackConfig.plugins.caseSensitivePaths,
+  ],
+  module: {
+    rules: [
+      {
+        test: /\.tsx?$/,
+        exclude: /(node_modules|bower_components)/,
+        use: [
+          {
+            loader: require.resolve('ts-loader'),
+          },
+        ],
+      },
+      {
+        test: /\.(js|mjs|jsx)$/,
+        exclude: /(node_modules|bower_components)/,
+        use: [
+          {
+            loader: require.resolve('babel-loader'),
+            options: babelConfig,
+          },
+        ],
+      },
+      {
+        test: /\.css$/,
+        use: [
+          {
+            loader: require.resolve('stylesheet-loader'),
+          },
+        ],
+      },
+      // load inline images using image-source-loader for Image
+      {
+        test: /\.(svg|png|webp|jpe?g|gif)$/i,
+        use: [
+          {
+            loader: require.resolve('image-source-loader'),
+          },
+        ],
+      },
+    ],
+  },
+};
diff --git a/packages/rax-scripts/src/config/component/webpack.config.dev.js b/packages/rax-scripts/src/config/component/webpack.config.dev.js
@@ -0,0 +1,28 @@
+'use strict';
+
+/* eslint no-console: 0 */
+const webpack = require('webpack');
+const webpackMerge = require('webpack-merge');
+const pathConfig = require('../path.config');
+const webpackConfigBase = require('./webpack.config.base');
+
+// enable source map
+const webpackConfigDev = webpackMerge(webpackConfigBase, {
+  devtool: 'inline-module-source-map',
+  entry: {
+    index: [pathConfig.componentDemoJs],
+  },
+  output: {
+    publicPath: '/',
+  },
+  plugins: [
+    new webpack.NoEmitOnErrorsPlugin(),
+  ],
+});
+
+Object.keys(webpackConfigDev.entry).forEach((point) => {
+  // hot reaload client.
+  webpackConfigDev.entry[point].unshift(require.resolve('../../hmr/webpackHotDevClient.entry'));
+});
+
+module.exports = webpackConfigDev;