01 编译环境搭建

Question

01 编译环境搭建

xwjie opened this issue 7 years ago · 0 comments

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

rollup
flow
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>