parcel 现在可以实际使用了么?

Question

有些问题没有找到解决方法

1. 没有类似webpack的proxyTable解决开发时ajax跨域的东西
2. parcel build index.html输出的文件都放在同一级文件夹下的,怎么把静态文件和html分开
3. 生成的文件名称不能自定义,包括按需加载的也是

求大神解答

Answer 1

你可以为parcel搭建一个自己的开发代理服务器

import Bundler from 'parcel-bundler';
import express from 'express';
import proxy from 'http-proxy-middleware';
import Path from 'path';

// parcel options, such as publicUrl, watch, sourceMaps... none of which are needed for this proxy server configuration
const options    = {};
// point parcel at its "input"
const indexEntry = Path.join(__dirname, '../../../public/regist-page', 'index_regist-page.html');
console.log('入口地址', indexEntry);
const entryFiles = indexEntry;
// init the bundler
const bundler    = new Bundler(entryFiles, options);

const backEnd            = {             // 远端服务器
  protocol: 'http',
  host:     '47.75.***.***',
  port:     '7823',
  getStr () {
    const str = `${this.protocol}://${this.host}:${this.port}`;
    console.log('拼接str', str);
    return str;
  },
};
const parcelPort: number = 1234;
const app                = express();
const prefix             = '/v2';                     // 仅仅处理带前缀
app.use(prefix, proxy({
  target:       backEnd.getStr(),
  changeOrigin: true,
  // autoRewrite:  true,
}));

app.use(bundler.middleware());
console.log(`dev proxy server operating at: http://localhost:${parcelPort}/`);
app.listen(parcelPort);

这样子，虽然略微麻烦一点，但是还是比Webpack要简单明了很多的。

Answer 2

1. 我暂时没看到
2. 同样不知道
3. 同上

其实我想说的是，自定义的东西太多了之后 那不就是另外一个webpack了吗？

然后 我现在用parcel的场景就是写一些简单的demo，和写一些库文件SDK，在开发阶段。

库文件SDK用rollup打包。

项目用webpack打包。

基本上我使用的场景就是这些。

Answer 3

谢邀，首先，Parcel的目标就是为了“前端新手”也能够自如地使用构建工具实现前端模块的代码打包的。所以Parcel完全可以应用于简单的HTML，css和js文件书写的代码进行打包而不用去考虑过多的模块化，组件化的东西。而当然，Parcel的出现时间也相对gulp，webpack等打包工具来说是太“年轻”了，所以个人认为生态还不太完善。不过完成简单的打包时完全够用的了，也可以说是一种新的尝试。