Skip to content

环境配置及运行

Jump to bottom Edit New page
花生PeA edited this page Feb 23, 2019 · 6 revisions

配置 Webpack

Short Night 依赖于 Webpack 进行构建，所以这一步我们的主要工作是配置 Webpack。

首先安装一些必须的依赖：

npm install webpack webpack-cli ts-loader style-loader css-loader --save-dev

然后创建一个 webpack 配置文件（webpack.config.js）到项目根目录，一个只有20行的 Webpack 配置文件~！

const Webpack = require('webpack');

module.exports = {
    entry: './entry.ts',
    output: {
        path: __dirname,
        filename: 'output.js',
    },
    module: {
        rules: [
            { test: /\.ts$/, use: 'ts-loader' },
            { test: /\.css$/, use: ['style-loader', 'css-loader'] },
        ],
    },
    resolve: { extensions: ['.js', '.ts'] },
};

Webpack 到此结束，根本不需要什么脚手架工具，徒手即可完成~~

创建 HTML

在根目录下创建一个index.html来运行整个项目，内容如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
</head>
<body>
    <div id="app"></div>
    <script src="output.js"></script>
</body>
</html>

关键在于body中的2行：

  1. <div id="app"></div>：我们定义了一个挂载点，将来要将时间线挂载到那里
  2. <script src="output.js"></script>：我们引用了 Webpack 的编译产出文件，这里的src对应webpack.config.js中的output

然后我们为 Webpack 创建入口文件/entry.ts：

import Timeline from './Timeline'; // 引用上一步中，你自己定义的 Timeline
import 'short-night/styles.css'; // 官方定义的引用 CSS 文件

const events = [{ // 定义事件列表
    date: '2017-5',
    title: 'Axis example 1',
    endDate: '2017-8',
    endText: 'The axis can avoid for each others'
},{
    date: '2017-6',
    title: 'Axis example 2',
    endDate: '2017-9-1',
    endText: 'End point is 2017.9'
},{
    date: '2017-9-1',
    title: 'Start of 2017.9',
},{
    date: '2017-1-2',
    title: 'Near the milestone',
},{
    date: '2016-12-15',
    endDate: '2017-2',
    title: 'Near the milestone',
    description: 'The date of end is 2017.2.'
},{
    date: '2018-8-15',
    title: 'Close together 1',
},{
    date: '2018-8-1',
    title: 'Close together 2',
},{
    date: '2018-7-15',
    title: 'Close together 3',
    description: 'The event description.',
},{
    date: '2018-7-1',
    title: 'Close together 4',
    description: 'The event description.',
},{
    date: '2016-8-1',
    title: 'Close together 5',
    description: 'The event description. The event description. The event description. The event description. The event description.',
},{
    date: '2016-8-15',
    title: 'Close together 6',
    description: 'The event description. The event description. The event description. The event description. The event description.',
},{
    date: '2018-4-2',
    title: 'A event which title is very very very very very very very very very very long',
},{
    date: '2018-3-9',
    title: '39s Day two years!',
},{
    date: '2017-3-9',
    title: '39s Day one years!',
},{
    date: '2016-3-9',
    title: '39s Day!',
    description: 'In japan and chinese, the pronunciation  of 39 is very like "Thank You". ' +
        'So some people call as Giving Day.'
}];

// 实例化

const timeline = new Timeline(Timeline.mount('#app', 'polar-day'));

timeline.drawInfo.events = events; // 赋值事件列表

timeline.apply().then(function () { // 应用 timeline 中的 drawInfo。此方法返回一个 Promise
    timeline.draw(); // 当应用完成后，将 timeline 画出
});

你可能会奇怪为什么使用 Timeline 要如此繁琐。实际上，这正是 Short Night 中一个 Component 从创建到绘制的流程：

  1. 构造时传入container、canvas等信息
  2. 手动赋值修改.drawInfo.xxx
  3. 调用.apply()来应用drawInfo
  4. 等待.apply()完成调用.draw()绘制

运行

接下来到了最激动人心的时刻了！

在 package.json 中增加一个 script

  "scripts": {
+   "dev": "webpack --watch --mode=development",
    "test": "echo \"Error: no test specified\" && exit 1"
  },

然后在命令行中，键入npm run dev后，等待 Webpack 编译完毕，打开我们上边创建的index.html到浏览器中。

First Run

如上图，若能看到页面无报错且显示出了一些文字，即为成功！

Modules Documents for English 中文文档

Modules

Documents for English

中文文档

Clone this wiki locally