编写代码在use-github中

概要目录

.
├─ doc/              # 文档使用
│   ├─ dev/             # 二次开发文档
│   ├─ usage/           # 使用文档,名称也常用dev
├─ example/          # 示例
├─ release/          # 打包代码-生产环境,名称也常用dist
│   ├─ bundle.js        # bundle
├── src/             # 源码
├── test/            # 用例测试
├── .babelrc         # (配置)Babel 转码
├── .gitignore       # (配置)需被 Git 忽略的文件(夹)
├── package.json     # 依赖包
├── README.md        # 文档封面
├── SUMMARY.md       # 文档概要,总结

架构搭建

  • 文件夹

    $ mkdir src release example doc test assets
    
  • 文件

    $ touch .babelrc webpack.config.js SUMMARY.md README.md
    

配置 src

新建src/index.js touch src/index.js

// src/index.js

const msg = "It is use-github project.";
alert(msg)

配置 example

新建example/index.html touch example/index.html

// example/index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>use-github</title>
</head>
<body>
  <h1>It is use-github example!</h1>
  <script src="../release/bundle.js"></script>
</body>
</html>

配置 其他文件夹

  • assets存放一些静态资源
  • release存放生成的文件
  • test存放测试用例(以后涉及)

配置 SUMMARY.md

// SUMMARY.md
# Summary

* [项目介绍](README.md)
* [概要目录](doc/usage/README.md)
    * [npm介绍、安装与使用](doc/usage/usage01.md)
    * [git介绍、安装与使用](doc/usage/usage02.md)
    * [一个标准的开源项目需要做哪些事情](doc/usage/usage03.md)
    * [制作官网-分享给他人,免费制作](doc/usage/usage04.md)
* [二次开发](doc/dev/README.md)
    * [开发1](doc/dev/dev.md)
    * [开发2](doc/dev/dev.md)

npm包初始化

$ npm init [-y]

安装依赖包(具体根据项目需要)

$ npm install babel-core babel-loader babel-polyfill babel-preset-es2015 webpack webpack-cli -D
$ [sudo] npm install gitbook-cli http-server -g

配置package.json的scripts

// package.json 
{
  "scripts": {
    "build": "webpack",
    "server": "http-server -p 8080",
    "build:init": "gitbook init",
    "build:book": "gitbook build",
  }
}

配置 .babelrc

// .babelrc
{
  "presets": ["es-2015"],
  "plugins": []
}

配置 .gitignore

node_modules
_book
release

配置 webpack.config.js

// webpack.config.js
module.exports = {
  entry: "./src/index.js",
  output: {
    path: __dirname,
    filename: "./release/bundle.js"
  },
  module: {
    rules: [
      {
        test: /\.js?$/,
        exclude: /node_modules/,
        loader: "babel-loader"
      }
    ]
  }
};

执行

// gitbook 初始化
$ npm run book:init

// gitbook 生成
$ npm run book:build

// 打包代码
$ npm run build

// 开启服务
$ npm run server

浏览

results matching ""

    No results matching ""