Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

01 编译环境搭建 #1

Open
xwjie opened this issue Jan 3, 2018 · 0 comments
Open

01 编译环境搭建 #1

xwjie opened this issue Jan 3, 2018 · 0 comments

Comments

@xwjie
Copy link
Owner

xwjie commented Jan 3, 2018 •
edited
Loading

编译环境搭建完毕，使用了如下组件/工具：

  1. rollup
  2. flow
  3. babel

package.json

{
  "name": "xiao",
  "version": "1.0.0",
  "description": "xiao framework 2018.01",
  "main": "src/main.js",
  "dependencies": {},
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-plugin-external-helpers": "^6.22.0",
    "babel-preset-env": "^1.6.1",
    "babel-preset-es2015-rollup": "^3.0.0",
    "babel-preset-flow": "^6.23.0",
    "rollup-plugin-babel": "^3.0.3",
    "rollup-plugin-node-resolve": "^3.0.0"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "rollup -w -c rollup.config.build.js",
    "prebuild": "flow check"
  },
  "keywords": [],
  "author": "xwjie",
  "license": "ISC"
}

.babelrc

{
  "presets": [
    "flow",
    "es2015-rollup",
    ["env", {
      "modules": false
    }]
  ],
  "plugins": ["external-helpers"]
}

.flowconfig

[ignore]
.*/lib/.*

[include]
.*/src/.*

[libs]

[lints]

[options]

[strict]

rollup.config.build.js

import resolve from 'rollup-plugin-node-resolve';
import babel from 'rollup-plugin-babel';

export default [{
  input: 'src/main.js',
  output: {
    file: 'dist/xiao.js',
    format: 'umd',
    name: 'Xiao'
  },
  plugins: [ 
  	resolve(),
    babel({
      exclude: 'node_modules/**' // only transpile our source code
    })
  ]
}];

工程代码 main.js ，只有一个框框：

// @flow

function Xiao(options: Object){
	console.log('main start', options);
}

export default Xiao;

编译

npm run build

测试文件 helloworld.html

<!DOCTYPE html>
<html>
<head>
	<title>Xiao框架之helloworld</title>
	<script src="../dist/xiao.js"></script>
</head>
<body>
<div id="demo">
	<h1>{{message}}</h1>
</div>

<script>
	new Xiao({
		el: '#demo',
		data: {
			message: '当你看到这句话的时候，表示框架工作正常'
		} 
	});

</script>

</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@xwjie