Fork me on GitHub

koa学习-项目打包-2

利用Parcel对项目进行打包

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

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

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

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

index.html:

1
2
3
4
5
6
7
8
9
10
11
12
<!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服务来启动这个项目

1
2
3
4
5
6
7
8
9
10
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的中间件。

1
2
3
4
5
6
7
8
9
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

然后写一个打包的命令:

1
2
3
4
"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.jsapp.js的文件。

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
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里面的代码是这样的:

1
2
3
4
5
6
import React from 'react';
const App = (props) =>{
return <div>{props.name}</div>
}
export default App;

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

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

1
2
3
4
5
6
7
8
{
"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文件:

1
2
3
4
5
6
7
8
9
10
11
12
13
<!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项目的打包。

-------------本文结束感谢您的阅读-------------