koa学习-项目打包-2

利用Parcel对项目进行打包

对于一个开发完成的网站，我们一般会将里面的资源做出两种的处理方式，一种是自己架设一个服务器，还有一种就是利用第三方的CDN工具来进行托管。
一般更好的方式是利用第三方的CDN去进行一个托管。

但是还有一个很令人头疼的问题，就是可能要对开发完成后的页面进行一个打包。

于是这里来介绍一些打包构建。

我们先尝试一下，在项目的根目录里面新建一个叫做parcel的文件夹，然后在里面放入一个server.js的文件来启动一个parcel打包服务，index.html作为静态的网页来挂载打包后生成的css文件或者是js文件。

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>Parcel 演示</title>
</head>
<body>
    <div id="app">Parcel打包案例</div>
</body>
</html>

然后在server.js里面动用一个koa服务来启动这个项目

const Koa = require('koa');
const { resolve } = require('path');
const serve = require('koa-static');

const app = new Koa();


app.use(serve(resolve(__dirname,'./')))

app.listen(4466)

这里我们使用了一个叫做koa-static的中间件。

const Koa = require('koa');
const { resolve } = require('path');
const server = require('koa-static');

const app = new Koa();

app.use(serve(resolve(__dirname,'./')));

app.listen(4466)

然后再安装一下parcel:

1	npm install parcel-bundler -S

然后写一个打包的命令:

"scripts": {
  "start": "nodemon server/index.js",
  "build":"parcel build parcel/index.html --no-cache -d parcel/dist --public-url /dist/"
}

命令的意思是打包的时候打包到parcel/dist的目录下面去，并且不会使用之前的缓存方式。

这样它就会将我们的项目demo打包到parcel的dist目录下面去。

这里我们就完成了传统的项目的打包，现在我们可以使用parcel来完成对一些现代框架(例如React的打包开发)。

使用Parcel对React项目进行打包

首先我们现在parcel的目录下面新建一个名为es的文件夹，里面放一个index.js和app.js的文件。

其中index.js里面放上 react 的一些代码，然后app.js里面放组件

import React from 'react'
import ReactDom  from 'react-dom'
import App from './app'

class AppContainer extends React.Component{
   state = {
       name : 'Parcel 打包 React 案例'
   }
   componentDidMount(){
       setTimeout(()=>{
           this.setState({
               name:'Parcel 打包成功!'
           })
       },2000)
   }
   render(){
       return <App name = {this.state.name} />
   }
}

ReactDom.render(
    <AppContainer />,
    document.getElementById('app')
)

然后app.js里面的代码是这样的:

import React from 'react';

const App = (props) =>{
    return <div>{props.name}</div>
}
export default App;

由于上面使用了es6的代码，因此我们需要使用babel来做一个JavaScript的向下兼容。

在根目录下新建一个叫做.babelrc的文件

{
    "presets": ["env","stage-0","react"],
    "plugins": [
        "transform-runtime",
        "transform-decorators-legacy",
        "transform-class-properties"
    ]
}

然后再把这些babel所需要的依赖都安装一些

1	npm install babel-preset-env babel-preset-stage-0 babel-preset-react babel-plugin-transform-runtime babel-plugin-transform-decorators-legacy babel-plugin-transform-class-properties -S

同时配置好了babel之后，还要记得在index.html(即我们打包的入口html文件)引入一些这个js文件:

<!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>Parcel 演示</title>
</head>
<body>
    <div id="app">Parcel打包案例</div>
    <script src="./es/index.js"></script>
</body>
</html>

然后打包完成之后，可以修改一波script的打包脚本命令，因为每次打包之前要把之前打包的文件给删除掉:

1	"build": "rm -rf parcel/dist && parcel build parcel/index.html --no-cache -d parcel/dist --public-url /dist/"

这样我们就完成了利用parcel对React项目的打包。