packingjs / packing Goto Github PK
View Code? Open in Web Editor NEW基于webpack的前端集成开发环境和编译环境
Home Page: https://packingjs.github.io
基于webpack的前端集成开发环境和编译环境
Home Page: https://packingjs.github.io
因为开发环境未输出CSS实体文件,但模版中却写了对css文件的引用,所有开发预览时css会返回404
本地服务时,使用packing的接口api转发,在cookie的domain和path都正确的情况下,发现请求时未带上cookie
只变更业务代码,vendor.js的版本号也会变化
http://www.cnblogs.com/myqianlan/p/5626505.html
使用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];
}
升级到 [email protected] ,以便使用最新的 stylelint 功能
./
开头的相对路径替换成_/
,导致build之后qzz服务器的ng无法正确转发。解决方法:
webpack.build.babel.js
配置文件中的静态资源url-loader配置,改写路径。{
test: new RegExp(`.(${fontExtensions.join('|')})$`, 'i'),
loader: 'file-loader',
options: {
name: '[path][name].[ext]',
publicPath: '/'
// emitFile: false
}
}
ant-design/ant-motion#44 (comment)
可能需要升级 less 配置 javascriptEnable
开启cssLoader.modules
功能时,本地运行出现报错如标题。
原因为缺少@babel/node包依赖。
把@babel/node从devDependencies移动至dependencies可解决。
受到dev机Nginx中rewrite规则的限制,会将纯数字md5值rewrite为dev字符串,从而导致页面访问404
使用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)
Error: Loading PostCSS Plugin failed: Cannot find module 'nano'
好像要配置成
{
cssnano: {}
}
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
出现警告
------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,
.....
}
希望页面数据的mock支持http接口请求返回数据直接拍到页面
为了兼容低版本浏览器,想在每个包中加入 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);
}
目前对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);
export default async function foo() {
var s = await bar();
console.log(s);
}
function bar() {
return "bar";
}
Uncaught ReferenceError: regeneratorRuntime is not defined
安装依赖包时提示:
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": []
}
在引入electron的时候报错:can't resolve 'fs'
PS:fs属于node的模块
打包后CSS中url路径不对
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.