packingjs / packing Goto Github PK

ant-design/ant-motion#44 (comment)

可能需要升级 less 配置 javascriptEnable

本地服务时，使用packing的接口api转发，在cookie的domain和path都正确的情况下，发现请求时未带上cookie

如下图

default.less

html,
body {
  width: 100%;
  height: 100%;
}

#root {
  display: flex;
  width: 100%;
  height: 100%;
  margin: 0 auto;
  overflow: auto;
  min-height: 100%;
  flex-direction: column;
}

.postcssrc.js

module.exports = {
  parser: false,
  plugins: {
    stylelint: true
  }
};

webpack.serve.babel.js 未做修改。

执行命令

npm run stylelint

执行通过，没有 lint 警告和错误

执行命令

npm run start

出现警告

为了兼容低版本浏览器，想在每个包中加入 polyfill.js，修改了 packing.config.path.entries，结果就报错了，修改的配置代码如下：

    entries: () => {
      const entryFileName = 'entry.js';
      const entryPath = 'src/pages';
      const entryPattern = `**/${entryFileName}`;
      const cwd = path.resolve(context, entryPath);
      const config = {};
      packingGlob(entryPattern, { cwd }).forEach((page) => {
        const key = page.replace(`/${entryFileName}`, '');
        config[key] = ['babel-polyfill', path.join(cwd, page)];
      });
      return config;
    }

报错文件：packing/lib/middleware.js
报错位置：entryPoints[chunkName].replace
报错原因：数组没有replace方法

const settingsFile = resolve(context, entryPoints[chunkName].replace('.js', '.settings.js'));
let settings = {};
if (existsSync(settingsFile)) {
  settings = requireDefault(settingsFile);
}

使用react 16.7-alpha 和 16.8-alpha 版本时（with hooks），react-dom中 useEffect API相关代码压缩后，报错TypeError: Cannot set property 'lastEffect' of null.

经查是uglifyjs压缩后代码语法存在问题， 大概类似于以下情况：

// 压缩前代码（并非react-dom源代码，只是大概的抽象）
var No, e;
if (No === null) {
  No = { lastEffect: null };
  No.lastEffect = e;
} else {
  // ...
  No.lastEffect = e
}

// 经过 `[email protected] ([email protected])` 压缩后代码：（大概抽象）
No.lastEffect = null === No ? (No = { lastEffect: null }, e) : (/*...*/, e)

Uglifyjs的github仓库下已有类似issue，但尚未修复。

经测试，使用terser和terser-wepback-plugin压缩工具，可以修复该问题。使用此工具压缩后代码大概类似下面：

// 使用 `[email protected]`压缩后代码：（大概抽象）
null === No ? ((No = { lastEffect: null }).lastEffect = e) : (/*...*/, No.lastEffect = e)

mock返回数据为Object类型时，与逾期不符

------test demo-----------

// mock => index.js
export default (req, res) => { return { me: { [Math.random()]: 1 } }; };

// template -> index.pug
script.
console.log(!{JSON.stringify(me)});

// ouput 每刷新页面一次多一个属性
{
0.877618266487793: 1,
0.3259789941366402: 1,
.....
}

packing-template-pug 23行代码 assign 方法为 merge 导致数据有误

只变更业务代码，vendor.js的版本号也会变化
http://www.cnblogs.com/myqianlan/p/5626505.html

受到dev机Nginx中rewrite规则的限制，会将纯数字md5值rewrite为dev字符串，从而导致页面访问404

1. 静态资源打包时./开头的相对路径替换成_/，导致build之后qzz服务器的ng无法正确转发。
2. 在开发环境中，commonChunk中引用的资源文件通过webapck.dll打包后未能生成实体文件，导致开发环境无法正确访问.

解决方法：

1. 可在使用时覆盖webpack.build.babel.js配置文件中的静态资源url-loader配置，改写路径。
2. 修改dll中静态资源file-loader配置：

{
    test: new RegExp(`.(${fontExtensions.join('|')})$`, 'i'),
    loader: 'file-loader',
    options: {
      name: '[path][name].[ext]',
      publicPath: '/'
      // emitFile: false
    }
  }

安装依赖包时提示：

warning packing > [email protected]: 🙌 Thanks for using Babel: we recommend using babel-preset-env now: please read babeljs.io/env to update!

babel-preset-env代码已经合并到babel工程的babel/experimental/babel-preset-env/目录。

npm install babel-preset-env --save-dev

可以使用的配置：

{
  "presets": [
    [
      "env", {
        "useBuiltIns": "entry",
        "modules": false,
        "targets": {
          "browsers": ["> 1%", "Android >= 4.4", "IOS >= 7", "ie >= 9"],
          "node": "4.0"
        }
      }
    ]
  ],

  "plugins": []
}

开启cssLoader.modules功能时，本地运行出现报错如标题。
原因为缺少@babel/node包依赖。
把@babel/node从devDependencies移动至dependencies可解决。

升级到 [email protected] ，以便使用最新的 stylelint 功能

在引入electron的时候报错：can't resolve 'fs'

PS：fs属于node的模块

export default async function foo() {
  var s = await bar();
  console.log(s);
}
function bar() {
  return "bar";
}

Uncaught ReferenceError: regeneratorRuntime is not defined

希望页面数据的mock支持http接口请求返回数据直接拍到页面

目前对packing serve功能通过webpackDevMiddleware来实现，编译出的中间产物默认放入内存中，实际使用时有时需要引用中间产物，因此希望能够将writeToDisk放入packing.js，以便在需要时配置

const mwOptions = {
  contentBase: src,
  quiet: false,
  noInfo: false,
  hot: true,
  inline: true,
  lazy: false,
  publicPath: webpackConfig.output.publicPath,
  headers: { 'Access-Control-Allow-Origin': '*' },
  stats: { colors: true },
  serverSideRender: true,
  writeToDisk: (filePath) => {
    return /ssr\.js$/.test(filePath);
  }
};
const dllPath = join(context, tmpDll);

const webpackDevMiddlewareInstance = webpackDevMiddleware(compiler, mwOptions);

打包后CSS中url路径不对

因为开发环境未输出CSS实体文件，但模版中却写了对css文件的引用，所有开发预览时css会返回404

Error: Loading PostCSS Plugin failed: Cannot find module 'nano'

好像要配置成

{
  cssnano: {}
}

使用packing时，webpack.build.babel.js/webpack.serve.babel.js用户可以自行修改并返回新的webpack配置，目前只支持使用一个webpack配置对象。希望能够支持多个webpack配置，既返回数组，其中包含多个配置。如：

export default (webpackConfig/* , program, appConfig */) => {
  const config = webpackConfig;
  const ssrConfig = Object.assign({}, config);
  ssrConfig.optimization = undefined;
  ssrConfig.target = 'node';
  ssrConfig.entry = ['./src/pages/ssr-assemble.js'];
  ssrConfig.plugins = config.plugins.filter(plugin => (
    plugin.constructor.name !== 'CleanWebpackPlugin' &&
    plugin.constructor.name !== 'PackingTemplatePlugin' &&
    plugin.constructor.name !== 'VisualizerPlugin'
  ));
  ssrConfig.plugins.push(new CopySsrPlugin());

  const entryFileName = 'entry.ssr.js';
  const entryPattern = `**/${entryFileName}`;
  const cwd = path.resolve('src/pages');
  const ssrEntries = packingGlob(entryPattern, { cwd }).map((page) => (`./${page}`));
  console.log(ssrEntries);
  ssrConfig.module.rules.push({
    test: /ssr-assemble\.js/,
    use: {
      loader: path.resolve(__dirname, './assemble-modules-loader.js'),
      options: { moduleFiles: ssrEntries }
    }
  });
  ssrConfig.output = {
    libraryTarget: 'umd',
    filename: 'ssr.js',
    path: config.output.path + '/templates'
  };
  return [config, ssrConfig];
}